web-dev-qa-db-ja.com

jqueryで選択ドロップダウンリストの「選択オプション」を設定する方法

次のjquery関数があります。

$.post('GetSalesRepfromCustomer', {
    data: selectedObj.value
}, function (result) {
    alert(result[0]);
    $('select[name^="salesrep"]').val(result[0]);
});

result[0]は、選択ボックスでselectedアイテムとして設定する値です。 result[0]はBruce jonesと等しい。

選択ボックスにはデータベースクエリが入力されますが、レンダリングされるHTMLの1つは次のとおりです。

<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones">Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>

$('select[name^="salesrep"]').val(result[0]);は、選択ボックスの選択オプションに値を設定しません。 $("#salesrep").val(result[0]);も試してみましたが、うまくいきませんでした。

任意の助けに感謝します。

だから私が欲しいのは、salesrepドロップダウンリストで選択/強調表示されたオプションがBruce Jonesであるということです。

HTML

<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones" selected >Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>

再度、感謝します、

スクリプト全体

<script type="text/javascript"> 
    $(document).ready(function () {

           $("#customer").autocomplete( 
     { 
     source: "get_customers", 
     messages: 
     { 
     noResults: '', 
     results: function() {} 
     }, 
     select: function( event, ui ) 
     { 
      var selectedObj = ui.item;        

     $.post('GetSalesRepfromCustomer', {data:selectedObj.value},function(result) { 
      alert(result[0]);
       var selnametest="Bruce Koller";
    $("#salesrep").val(selnametest);
     }); 

     } 
     });
         });


</script>

レンダリングされるHTMLは次のとおりです。

<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="RyanLubuschagne">Ryan Lubuschagne</option>
<option value="Bruce Jones">Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
</select>
jqueryhtmlselectedhtml-select
28
Smudger

これを試して ：

$('select[name^="salesrep"] option[value="Bruce Jones"]').attr("selected","selected");

option[value="Bruce Jones"]をoption[value=result[0]]に置き換えるだけです

また、新しいオプションを選択する前に、前のオプションを「選択解除」することもできます。

$('select[name^="salesrep"] option:selected').attr("selected",null);

これも読みたくなるかもしれません： jQuery get specific option tag text

編集：jQuery Mobileを使用すると、このリンクが適切なソリューションを提供する可能性があります。 jquery mobile-set/option値を設定

48
Jb Drucker

ドロップダウンの選択オプションとして設定する値を設定します。

$("#salesrep").val("Bruce Jones");

ここにデモがあります

それでも機能しない場合：

  1. コンソールでJavaScriptエラーを確認してください。
  2. Jqueryファイルが含まれていることを確認してください
  3. 外部で使用している場合、ネットワークはjqueryファイルをブロックしていません。
  4. ビューソースをチェックして、要素停止jqueryの正確なコピーを正しく動作させる
28
Zaheer Ahmed

誰も言及していないと思うことの1つと、過去に（特に動的にselectを設定するときに）犯した愚かな間違いです。 jQueryの.val（）は、指定された値と一致する値を持つオプションがない場合、選択入力に対して機能しません。

ここに説明するフィドルがあります-> http://jsfiddle.net/go164zmt/

<select id="example">
    <option value="0">Test0</option>
    <option value="1">Test1</option>
</select>

$("#example").val("0");
alert($("#example").val());
$("#example").val("1");
alert($("#example").val());

//doesn't exist
$("#example").val("2");
//and thus returns null
alert($("#example").val());
3
Jake Zieve

YourIDとvalue = "3"を現在のものに置き換える必要があります。

$(document).ready(function() {
  $('#YourID option[value="3"]').attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="YourID">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
</select>

現在の値の場合はvalue = "3"です。

$('#YourID option[value="3"]').attr("selected", "selected");

<select id="YourID" >
<option value="1">A </option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
2
Oscar Fuquen
$(document).ready(function() {
  $('#YourID option[value="3"]').attr("selected", "selected");
  $('#YourID option:selected').attr("selected",null);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="YourID">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
</select>
1
Madhuka Dilhan

.val('Bruce jones')とvalue="Bruce Jones"の一致では、大文字と小文字が区別されます。ジョーンズを大文字で使用しているように見えますが、もう一方では使用していません。違いの原因を突き止めるか、名前の代わりにIDを使用するか、両方で.toLowerCase()を呼び出します。

0
Black Mantha