web-dev-qa-db-ja.com

JQueryを使ってDropDownListの値を設定する方法を教えてください。

質問が言うように、jQueryを使ってDropDownListコントロールの値を設定するにはどうすればよいですか。

jquerydrop-down-menu
330
flesh
$("#mydropdownlist").val("thevalue");

optionsタグの値がvalメソッドの値と一致するようにしてください。

566
Nick Berardi

インデックスを扱う場合は、.attr（）を使って選択したインデックスを直接設定できます。

$("#mydropdownlist").attr('selectedIndex', 0);

これはドロップリストの最初の値に設定します。

編集： 上記のやり方は以前はうまくいっていた。しかし、それはもう終わっていないようです。

しかし、Hanがコメントで指摘しているように、正しい方法は次のとおりです。

$("#mydropdownlist").get(0).selectedIndex = index_here;
50
mattsson

@Nick Berardiが示唆しているように、変更した値がUIフロントエンドに反映されていない場合は、次のことを試してください。

$("#mydropdownlist").val("thevalue").change();
38
IRSHAD

この非常に簡単な方法を試してください。

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");
18
Clyde

あなたのドロップダウンがAsp.Netドロップダウンなら、以下のコードは問題なく動作します。

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

しかしあなたのDropDownがHTMLドロップダウンなら、このコードはうまくいくでしょう。

 $("#DropDownName")[0].selectedIndex=0;
9
salah9

質問に対する最良の回答： 

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

例えば：

$("#CityID").val(20).trigger("chosen:updated");

または

$("#CityID").val("chicago").trigger("chosen:updated");
4
Asif Ramzan

やり方はたくさんあります。ここにそれらのいくつかがあります：

$("._statusDDL").val('2');

OR

$('select').prop('selectedIndex', 3);
1
Dilip Kumar Yadav

試してください： 

jQuery("#availability option:selected").val();

オプションのテキストを取得するには、text（）を使用します。 

jQuery("#availability option:selected").text();

詳細情報： 

 http://api.jquery.com/val/
 http://api.jquery.com/text/

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />
1
Sangeet Shah

これは、選択したオプションを素早く設定するための機能です。

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

引数要素IDと選択された値を使用してこの関数を呼び出します。このような：

SetSelected('selectID','some option');

設定する選択オプションが多数ある場合に便利です。

0
vishwakarma09

// Htmlドロップダウンリストの形式。

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// JavaScriptを使用して選択した項目をtest2に変更する場合これを試してください。 //選択したい次のオプションを設定します

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);
0
Sikha

値を設定して更新 ドロップダウンリストイベント

$("#id").val("1234").change();
0
Jignesh Joisar

drop-downselected値を設定して変更を更新

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

ここでは最初にModelから値を設定し、次に選択した値を更新しました

0
Deepak Tambe

私はこれが役に立つかもしれないと思います：

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

このようにした場合は、テキストのない要素を追加します。そのため、[コンボ]をクリックしても表示されませんが、後で追加した値-1は$（ "。autoCompleteDepartment"）。val（-1）で選択します。コンボに有効な値があるかどうかを制御しましょう。

誰かに役立つことを願っています。

私の英語ですみません。

0
JapineJ

Ajaxですべての<options ....></options>をロードした場合
これを行うには、次の手順に従ってください。

1）。設定値ドロップダウン用に別のメソッドを作成する
例：

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
}

2）。 ajax呼び出しがすべてのhtml追加タスクを完了したときにこのメソッドを呼び出します

例：

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}
0
GrvTyagi

上記のハイライトされた/チェックされた答えを使うことは私のために働きました...ここに少し洞察があります。私はURLを取得することにちょっと騙しましたが、基本的にはJavascriptでURLを定義してから、上からjquery回答を通してそれを設定します：

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>
0
user9915877