JQuery-値に基づいてドロップダウンアイテムを選択する方法

86

ドロップダウン（選択）をエントリの値に基づいて変更するように設定したいと思います。

私は持っています

<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でこれを行うにはどうすればよいですか？

javascript  jquery  select  jquery-selectors 
— マークW
ソース
簡単だと思いましたが、うまくいかなかったようです。デバッグ時間だと思います。
— マークW
1
— Christopher
1
あなたのタイトルは少し誤解を招くものです。あなたはドロップダウンを選択していません、あなたはドロップダウンのオプションを選択しています...それが私をまったく助けない7つの答えがある理由です...
— user1566694 2016
@ user1566694技術的になりたい場合は、実際にはドロップダウンとは呼ばれません。これは「選択」です
— Mark W

回答:

156

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

$('#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>
スニペットを展開

— ジーフ・ギルバート
ソース
21
上記に同意しました。あなたのコードによると、それは次のようになります$('#mySelect option[value="fg"]').attr('selected', true)
— Martavis P. 2015
私の間違い。場合によっては機能しないこともありますが、フィドルでは明らかに機能します。
— Martavis P. 2015
2
私はこれに注意するだけです。<select>タグの「change」イベントはトリガーされません。そのイベントを使用していない場合、これは問題ありません。
— チャドフィッシャー
2
@ChadFisher変更イベントを使用している場合は、次のコマンドでトリガーします$('#dropdownid').val('selectedvalue').trigger('change');
— Liam
実際、トリガーの変更は、モデルの更新などの特定のアクションを実行するためのフォローアップコードを記述した場合に役立ちます。また、ASP.netビューモデルの更新もDDの変更イベントで発生します。+1
— DivTiwari20年
23 
$('#yourdropddownid').val('fg');

オプションで、

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

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

ライブデモ

— xbonez
ソース
8

このjQueryコードを使用するのが簡単だと思います。

$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>
スニペットを展開

— 空
ソース
7 
 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");
— Abdo-ホスト
ソース
1
または$（ '＃mySelect'）。val（ 'ab'）。trigger（ "change"）;; select2プラグインを使用している場合。
— Vaibhav Jain 2016
1
.change（）は、ASP.netMVCモデル属性を更新するのに役立ちました。答えてくれてありがとう。
— DivTiwari20年
ありがとう.... trigger（ 'change'）は完璧に機能します！
— アンデルソン・ルイス・ダ・シウバ
5

あなたは単に使うことができます： 

$('#select_id').val('fg')
— 大江
ソース
2

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

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

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

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

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

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

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

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

— Manjuboyz
ソース
インデックスベースの選択はめったに使用されませんが、ドロップダウンを設定するための一般的なコードを記述し、値がDDによって異なるシナリオを考えると、これは良いオプションです。ありがとう:)。
— DivTiwari20年
1 

$('#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>
スニペットを展開

— シッダールタ
ソース
1

このコードは私のために働いた：

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

このHTML選択リストを使用すると：

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>
— ノール
ソース
0

ドロップダウンリストの値がすでにハードコーディングされている別の状況があります。地区は12しかないため、jQueryオートコンプリート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());
        }
    });

これらのことをその場で学ぶのに時間がかかりすぎたため、すべてが共有されました。これがお役に立てば幸いです。

— user1585204
ソース
あなたはここで話題から外れました。問題は、JQueryを使用してその値に基づいてselectを変更するだけです。関係するUI要素はありません。
— マークW
0

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

// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }

});
— Hardik
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.