web-dev-qa-db-ja.com

JQuery-値に基づいてドロップダウン項目を選択する方法

エントリの値に基づいて変更されるドロップダウン（選択）を設定したい。

私は持っています

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

そして、「fg」の値を持つオプションが選択されるようにドロップダウンを変更することを知っています。 JQueryでこれを行うにはどうすればよいですか？

javascriptjqueryselectjquery-selectors
74
Mark W

あなたが使用する必要があります

$('#dropdownid').val('selectedvalue');

次に例を示します。

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
128
Jeaf Gilbert
$('#yourdropddownid').val('fg');

必要に応じて、

$('select>option:eq(3)').attr('selected', true);

ここで、3は必要なオプションのインデックスです。

ライブデモ

22
xbonez
$('#mySelect').val('fg');...........
15
Royi Namir

単に使用できます：

$('#select_id').val('fg')
5
Dagang
$('#mySelect').val('ab').change();
4
Abdo-Host

あなたの場合$("#mySelect").val("fg") :)

2
Kamran Ahmed

答えるには遅すぎるかもしれませんが、少なくとも誰かが助けを得るでしょう。

次の2つのオプションを試すことができます。

これは、インデックス値に基づいて割り当てる場合の結果です。「0」はインデックスです。

 $('#mySelect').prop('selectedIndex', 0);

「attr」は最新のjqueryでは非推奨になっているため、使用しないでください。

オプション値に基づいて選択する場合は、次を選択します。

 $('#mySelect').val('fg');

ここで、「fg」はオプション値です

1
Manjuboyz

$（ 'select＃myselect option [value = "ab"]'）。

0
MythBank

ドロップダウンリストの値が既にハードコードされている別の状況があります。 12地区しかないため、jQuery Autocomplete UIコントロールにはコードが入力されません。

解決策ははるかに簡単です。コントロールが動的にロードされていると想定された他の投稿を歩き回らなければならなかったため、必要なものが見つからず、最終的にそれを見つけました。

次のようなHTMLがある場合、選択したインデックスの設定は次のように設定されます。ドロップダウンIDに加えて-input部分に注意してください。

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

オートコンプリートコントロールについて考え出された他の何かは、適切に無効化/空にする方法です。一緒に機能する3つのコントロールがあり、そのうち2つは相互に排他的です。

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

これのいくつかは投稿の範囲外であり、どこに正確に置くべきかわかりません。これは非常に有用であり、理解するのに時間がかかるため、共有されています。

Undまた...このようなコントロールを有効にするには、（無効、false）およびNOT（有効、true）になります-これも少し時間がかかりました。 :)

投稿に加えて、他に注意すべきことは次のとおりです。

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

これらのことをオンザフライで学習するのに時間がかかりすぎたため、すべてが共有されました。これが役に立てば幸いです。

0
user1585204

名前でドロップダウンオプションの値を選択できます

jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }
});
0
Hardik
$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
0
Siddhartha