web-dev-qa-db-ja.com

JQueryを使ってselectのすべてのオプションを取得する方法

IDを渡すことでjQueryを介してselectのすべてのオプションを取得する方法を教えてください。

私はただテキストではなく、それらの値を得ることを探しています。

javascriptjqueryjquery-selectors
378
Click Upvote

つかいます：

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each（）| jQuery APIドキュメント

577
ybo

私はjQueryを知りませんが、あなたがselect要素を取得した場合、それが 'options'オブジェクトを含むことを私は知っています。

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option
155
KooiInc

$.mapはおそらくこれを行うための最も効率的な方法です。

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

選択されているものだけが必要な場合は、$('#selectBox option:selected')に変更オプションを追加できます。

最初の行はすべてのチェックボックスを選択し、それらのjQuery要素を変数に入れます。その後、jQueryの.map関数を使用して、その変数の各要素に関数を適用します。私たちがしているのは、各要素の値を返すことだけです。 map関数内でそれらを返すので、実際には要求どおりに値の配列を作成します。

129
PCasagrande

いくつかの回答ではeachを使用していますが、ここではmapがより良い選択肢です。

$("select#example option").map(function() {return $(this).val();}).get();

JQueryには（少なくとも）2つのmap関数があります。 Thomas Petersenの答えは "Utilities/jQuery.map"を使っています。この答えは "Traversing/map"（そしてそれゆえ少しきれいなコード）を使います。

それはあなたが値をどうしようとしているかによります。もし関数から値を返したいのなら、おそらくmapがより良い選択肢です。しかし、値を直接使うつもりなら、おそらくeachが欲しいでしょう。

66
cic
$('select#id').find('option').each(function() {
    alert($(this).val());
});
46
Raibaz
$("#id option").each(function()
{
    $(this).prop('selected', true);
});

ただし、 _ correct _ の方法は、次のように要素のDOMプロパティを設定することです。

$("#id option").each(function(){
    $(this).attr('selected', true);
});
16
Ben Sewards

これは#myselectboxのオプション値をNice clean配列に入れます。

// First, get the elements into a list
var domelts = $('#myselectbox option');

// Next, translate that into an array of just the values
var values = $.map(domelts, function(elt, i) { return $(elt).val();});
13
Thomas Petersen

チェックボックスの名前ですべての「選択した値」を取得し、それらを「、」で区切った文字列で表示できます。

これを行う良い方法は、jQueryの$ .map（）を使うことです。

var selected_val = $.map($("input[name='d_name']:checked"), function(a)
    {
        return a.value;
    }).join(',');

alert(selected_val);
11
Limpan

実用例

これを行う最も効率的な方法は$.map()を使うことです。

例： 

var values = $.map($('#selectBox option'), function(ele) {
   return ele.value; 
});
6
Naveen Kumar Alonekar

それには以下のコードを使用できます。

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
    assignedRoleId.Push(this.value);
});
3
Mitul Maheshwari

複数選択オプションの場合：

$('#test').val()は選択された値のリストを返します。 $('#test option').lengthはオプションの総数（選択されたものと選択されていないものの両方）を返します

2
Sergei Zinovyev

これはjQueryを使った簡単なスクリプトです。

var items = $("#IDSELECT > option").map(function() {
    var opt = {};
    opt[$(this).val()] = $(this).text();
    return opt;
}).get();
var selectvalues = [];

for(var i = 0; i < items.length; i++) {
    for(key in items[i]) {


        var id = key;
        var text = items[i][key];

        item = {}
        item ["id"] = id;
        item ["text"] = text;

        selectvalues.Push(item);

    }
}
console.log(selectvalues);
copy(selectvalues);

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
1
Cubiczx

これは、選択した項目のすべての値、テキスト、値、または選択した項目のテキストを取得するjqueryの簡単な例です。

$('#nCS1 > option').each((index, obj) => {
   console.log($(obj).val());
})

printOptionValues = () => {

  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).val());
  })

}

printOptionTexts = () => {
  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).text());
  })
}

printSelectedItemText = () => {
  console.log($('#nCS1 option:selected').text());
}

printSelectedItemValue = () => {
  console.log($('#nCS1 option:selected').val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" id="nCS1" name="nCS1" class="form-control" >
                                        <option value="22">Australia</option>
          <option value="23">Brunei</option>
          <option value="33">Cambodia</option>
          <option value="32">Canada</option>
          <option value="27">Dubai</option>
          <option value="28">Indonesia</option>
          <option value="25">Malaysia</option>                              
</select>
<br/>
<input type='button' onclick='printOptionValues()' value='print option values' />
<br/>
<input type='button' onclick='printOptionTexts()' value='print option texts' />
<br/>
<input type='button' onclick='printSelectedItemText()' value='print selected option text'/>
<br/>
<input type='button' onclick='printSelectedItemValue()' value='print selected option value' />
1
NuOne
$("input[type=checkbox][checked]").serializeArray();

または

$(".some_class[type=checkbox][checked]").serializeArray();

結果を見るには：

alert($("input[type=checkbox][checked]").serializeArray().toSource());
0
Pavel Krinitskiy

あなたがいくつかの選択されたテキストですべてのオプションを探しているなら、以下のコードはうまくいくでしょう。

$('#test').find("select option:contains('B')").filter(":selected");
0
Tjcool