web-dev-qa-db-ja.com

値で選択オプション 'selected'を設定します

いくつかのオプションを含むselectフィールドがあります。今私はjQueryでそれらのoptionsのうちの1つを選択する必要があります。しかし、選択しなければならないvalueのoptionしかわからないときにどうすればいいのでしょうか。

以下のHTMLがあります。

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

値val2を持つオプションを選択する必要があります。どうすればこれができますか？

これはデモページです： http://jsfiddle.net/9Stxb/ /

jqueryjquery-selectorshtml-select
783
w00

Optionsタグを使用する必要がない簡単な方法があります。

$("div.id_100 select").val("val2");

This jQueryメソッド をチェックしてください。

1283
pinghsien422

値 'val2'のオプションを選択するには、以下のようにします。

$('.id_100 option[value=val2]').attr('selected','selected');
350
Kir Ivlev

値を選択した後にchange()イベントを使用してください。ドキュメントから：

内容が変更されずにフィールドがフォーカスを失った場合、イベントは発生しません。イベントを手動でトリガーするには、引数なしで.change()を適用します。

$("#select_id").val("val2").change();

より詳しい情報は.change（）にあります。

233
jitendrapurohit

最初にすべての選択を解除し、選択可能なオプションをフィルタリングします。

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)
45
silly
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

値による保留状況への設定

   $('#contribution_status_id').val("2");
39
Developer

私のために次の仕事をしました

$("div.id_100").val("val2").change();
33
Taran

最も簡単な方法はval（）を設定することを選択することだと思いますが、次のことを確認できます。を参照してくださいjQueryでselectおよびoptionタグを処理するにはどうすればいいですか？オプションの詳細については。

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

最適化されていませんが、次のロジックも場合によっては便利です。

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});
24
Dipu

属性セレクタ[attributename=optionalvalue]を使用して任意の属性とその値を選択できます。したがって、この場合はオプションを選択して選択した属性を設定できます。

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

ここでvalueはあなたが選択したい値です。

以前に選択した値を削除する必要がある場合、これが複数回使用されている場合のように、最初に選択した属性を削除するように少し変更する必要があります。

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);
16
Rune FS

簡単な答えは、HTMLでです。

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

jqueryでは、ボタンなどで下記の関数を呼び出します。

$('#idUkuran').val(11).change();

それは単純で、100％うまくいっています、私の仕事からそれを取って...

13
Mang Jojot

最も簡単な方法は次のとおりです。

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

出力：これは _ ent _ をアクティブにします。

11
Pran

Select値を設定した後はchange()を使うのが良いでしょう。

$("div.id_100 select").val("val2").change();

こうすることで、コードはユーザーによる選択の変更に近づきます。説明は JS Fiddle に含まれます。 

JS Fiddle

11
Nick Tsai

$('#graphtype option[value=""]').prop("selected", true); 

これは#graphtypeがselectタグのidの場合にうまく機能します。

選択タグの例：

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>
8
LOKENDRA

つかいます：

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

これは私のために働きます。私はこのコードをfancyboxの更新フォームで値を解析するために使っています。そしてapp.jsからの私の完全な情報源は次のとおりです。

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

そして私のPHPコードは：

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}
8
Adityo
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");
7
Ravi Wadje

これを覆す理由はありません、あなたがしているのは、プロパティにアクセスして設定することだけです。それでおしまい。

さて、それでいくつかの基本的なdom： もしあなたがまっすぐなJavaScriptでこれをしていたら、それはあなたがこうするだろう

window.document.getElementById('my_stuff').selectedIndex = 4;

しかし、あなたは単純なJavaScriptでそれをしているのではなく、あなたはjQueryを使ってそれをしています。そしてjQueryでは、プロパティを設定するために.prop（）関数を使いたいので、次のようにします。

$("#my_stuff").prop('selectedIndex', 4);

とにかく、あなたのIDが一意であることを確認してください。そうでなければ、なぜこれがうまくいかなかったのか疑問に思って壁に頭をぶつけているでしょう。

7
Yitzhak

.attr（）は古いjQueryバージョンでは動作しないことがありますが、 .prop（） ：を使用できます

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});
7
Shujaath Khan

これは Select Control に対して確実に機能します。

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });
4
Shujaath Khan

古い投稿ですが、これはjQueryプラグインのように振る舞う1つの単純な関数です。

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

あなたはただこんなに簡単なことをすることができます：

$('.id_100').selectOption('val2');

これを使用する理由は、あなたが選択したサマントをDOMに変更してクロスブラウザをサポートしているからです。

基本的な人間行動シミュレーションです。

3
Ivijan Stefan Stipić

このコードを入れるだけです：

$("#Controls_ID").val(value);
3
Osama khodrog

これを試して。 シンプルだが効果的なjavaScript + jQueryの致命的なコンボ。

SelectComponent： 

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

選択：

document.getElementById("YourSelectComponentID").value = 4;

今すぐあなたのオプション4が選択されます。これを実行して、デフォルトで起動時に値を選択できます。

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

または単純な関数を作成してその中に行を入れ、anyEventでその関数を呼び出してオプションを選択する

JQuery + javaScriptの混在は魔法をやる。

3
Majid Ali Khan
  • 動的に変更したい値はcase sensativeなので、HTMLで定義したオプションにある値と同じである必要があります。次のように選択ボックスを動的に変更できます。

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work

2
Shahrukh Anwar

値がIDで、テキストがコードであるときに私が遭遇した問題。コードを使用して値を設定することはできませんが、IDに直接アクセスすることはできません。

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

... Do work here...
0
Ryan

これはうまくいきます 

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });
0
Mohammed Muzammil

最善の方法は次のとおりです。

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);
0
Daniel Carpio Contreras

コントロールが静的なHTMLページ内にあるのではなく動的に作成された場合、選択ドロップダウンコントロールが動的に変更されないという問題があるようです。

JQueryでは、この解決策は私にとって役に立ちました。

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

2行目のない1行目のコードの補遺と同様に、実際には透過的に機能していました。インデックスを設定した後で選択されたインデックスを取得することは正しいです。コントロールの最上位ラベルにあります。

お役に立てれば。

0
user2288580