jQueryを使用して選択のすべてのオプションを取得する方法?


回答:


612

使用する:

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

.each()| jQuery APIドキュメント


63
どのJavaScript操作もjQueryを必要としません。jQueryは、JS操作を単純化するための選択事項です。
ruuter、2014

8
$( "#idオプション").each(function(name、val){var opt = val.text;});
kofifus 2014

3
$.mapはるかにエレガントで、エラーが発生しにくくなります(以下を参照)。
Elliot Cameron

1
$('#id option').map((index, option) => option.value):「バニラ」JS map関数((item, index) =>)と比較してコールバック署名がどのように反転するかに注意してください
imrok

168

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

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

74
+1。プレーンな古いDOMにすでに非常に効率的な実装が組み込まれているものについては、jQueryの複雑なセレクターマジックに頼らないでください。
ボビンス2009

19
どうしてですか、@ bobince?ほとんどjQueryを使用している場合は、コードを少なくして書く方が速く、このインスタンスで通常のjavascriptに切り替える必要があるかどうかを判断せずにすみます。そして、あなたのコードはより一貫しています。
Andrew

139

$.map おそらくこれが最も効率的な方法です。

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

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

選択したオプション$('#selectBox option:selected')のみが必要な場合は、に変更オプションを追加できます。

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


3
これは最もエレガントなソリューションIMOです。マップは、この状況に正確に適合する非常に強力な構成要素です。
hazerd

1
私はあなたのソリューションが本当に好きです-それは私が行ったアプローチです。ただし、選択した値だけが必要な場合は、さらに簡単$('#selectBox').val()です。選択した値の配列を返します。
whoisthemachine 2015

こんにちは、@ PCasagrandeカスタム属性名 'data-type'があります。どのように私はあなたのソリューションを使用してこれの価値を得ることができますか?私がやっていることは「option.data-type」ですが、これは私にNaNを与えています。前もって感謝します。
Me_developer

こんにちは、@ PCasagrande私は '$(option、this).attr( "data-type")'を実行して必要なものを取得しました。しかし、もっと良いものがあれば私に知らせてください。ありがとう。:)
Me_developer

「return option.attr( "data-type");」だけで十分だと思います。マップで。これにより、データ型の値の配列が得られます。
PCasagrande

74

いくつかの回答はを使用eachしていますmapが、ここではIMHOの方が優れています。

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

mapjQueryには(少なくとも)2つの関数があります。Thomas Petersenの回答では「Utilities / jQuery.map」を使用しています。この回答では、「トラバーシング/マップ」を使用しています(そのため、少しわかりやすいコードを使用しています)。

値をどのように処理するかによって異なります。たとえば、関数から値を返したい場合は、mapおそらくより良い代替手段です。ただし、値を直接使用する場合は、おそらく必要ですeach


4
ここでは$(this).val()の代わりに実際にthis.valueを使用できます。また、最初のセレクター(#exampleオプション)で子を見つけることで、より良いサービスが提供されます。最後にget()を使うのは大変です。
Alex Barrett、

1
@Alex Barret:まあ、jQueryをまったく使わなくてもこの問題を解決することは可能です。引数として要素を指定してjQueryを呼び出すと、要素がjQueryオブジェクトにラップされます(つまり、ツリートラバースは行われません。つまり、それほど高価ではありません)。おそらく、マイクロ最適化として、はい。
cic

マップFTW。これはまさにそれが行われるべき方法です。最後のget()は不要のようですが(DOMノードを返し、val()はすでに文字列を提供しているので...?)var opts = $( '#cm_amt option')。map(function( ){parseInt($(this).val());を返す});
sbeam

3
@sbeam:「戻り値はjQueryでラップされた配列であるためget()、返されるオブジェクトが基本配列を処理することは非常に一般的です。」- api.jquery.com/map
CIC

これは非常に役に立ちました。値ではなくテキストが必要だったので、text()代わりにに変更しましたval()。ありがとうございました !(私はあなたに1000を超えさせました;->
ParPar

52
$('select#id').find('option').each(function() {
    alert($(this).val());
});

1
これはチケットです。セレクターを使用するのではなく、要素をinitの変数にキャッシュしたいからです。
Doug Beard

1
$(this)でも動作します(これは探していたものです)例:
Hugh Seagraves

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

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

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

4
.attr( 'selected'、 'selected')ではないでしょうか?
v010dya 2015

16

これにより、のオプション値が#myselectboxきれいな配列に配置されます。

// 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();});

これを次のように短縮できます$.map(domelts, elt=> $(elt).val())
。– Jonno_FTW

11

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

これを行うための良い方法は、jQueryの$ .map()を使用することです。

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

alert(selected_val);

6
このコードはかなり判読不能ですが、多少かっこいいとしても、使用することはありません。
[Upvote]をクリックします。

7
また、質問は約あるselectoptionチェックボックスではありません。
認知症の


3

そのために次のコードを使用できます。

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

2

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

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


1

これは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

以下は、選択したアイテムのすべての値、テキスト、または値、または選択したアイテムのテキストを取得するための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' />


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

または:

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

結果を確認するには:

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

0

選択したテキストを含むすべてのオプションを探している場合は、以下のコードが機能します。

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

0

短い道

$(() => {
$('#myselect option').each((index, data) => {
    console.log(data.attributes.value.value)
})})

または

export function GetSelectValues(id) {
const mData = document.getElementById(id);
let arry = [];
for (let index = 0; index < mData.children.length; index++) {
    arry.push(mData.children[index].value);
}
return arry;}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.