jQueryを使用して複数の選択ボックスの値を取得するにはどうすればよいですか?


155

jQueryを使用して複数の選択ボックスの値を取得するにはどうすればよいですか?

回答:



291

.val()複数選択リストで関数を使用すると、選択した値の配列が返されます。

var selectedValues = $('#multipleSelect').val();

そしてあなたのhtmlで:

<select id="multipleSelect" multiple="multiple">
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

11
Text 1値の代わりに取得したい場合はどうなりますか?交換する.val().text()
Raza Ahmed

9
null空の配列ではなく、何も選択されていない複数選択が返されることに注意してください。これは、選択した値をプログラムで追加する場合、正しい値にするために少しジャグリングする必要があることを意味します。
レオ

ありがとうございました!jQueryを使用して要素から値を取得するには多くの方法があり、必然的に、探している方法を見つけるのに苦労します。
チャールズウッド

5
@Leoは、合体を追加してnullの問題を回避できvar selectedValues = $('#multipleSelect').val() || []; ます。たとえば、文字列の配列を返すことにも注意してください。私は整数と比較していて、一致がなかったので、を追加しました.toString()
tkerwood 2016

16

js map関数を使用することもできます:

$("#multipleSelect :selected").map(function(i, el) {
    return $(el).val();
}).get();

次に、option要素の任意のプロパティを取得できます。

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

2
すばらしい答えですが、elオプションごとにjQueryオブジェクトとしてラップするという余分な費用を支払う必要はありません。DOMがおかしくない場合は、すぐにDOMから離れてください。$(el).val()だけに変更できますel.value。もちろん、jQueryに慣れている場合や、他の例のようにデータや属性を取得したい場合でも、jQueryは誰にも害を与えません。
KyleMit 2015

1
@KyleMit素晴らしいヒント。このアプローチを使用して、非表示のフィールド値のコレクションを取得しただけで、完全に機能しました。
EvilDr 2017年

12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

この問題への別のアプローチ。選択された配列はオプション値としてインデックスを持ち、各配列項目はその値としてテキストを持ちます。

例えば

<select id="multipleSelect" multiple="multiple">
    <option value="abc">Text 1</option>
    <option value="def">Text 2</option>
    <option value="ghi">Text 3</option>
</select>

オプション1と2が選択されていると言う場合。

選択された配列は次のようになります:

selected['abc']=1; 
selected['def']=2.

5

たった一行

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

出力:["text1"、 "text2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

出力:["value1"、 "value2"]

.join()を使用する場合

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

出力:text1、text2、text3


4

HTMLコード:

 <select id="multiple" multiple="multiple" name="multiple">
  <option value=""> -- Select -- </option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
  <option value="4">Opt4</option>
  <option value="5">Opt5</option>
 </select>   

JQueryコード:

$('#multiple :selected').each(function(i, sel){ 
    alert( $(sel).val() ); 

});

うまくいくことを願っています


13
それが答えであるかどうかわからない場合は、「うまくいくと期待しないでください」。テストして、確認してください。
Sterling Archer、

6
答えがわからない場合は投稿しないでください。私たちは希望のためにここにいません.. !! LOL
Clain Dsilva

3
ちょっと。それは完全に動作します。見てみな。あなたはそれを期待するべきです。無関係のコメントを与えてはいけない...
Prabhagaranに

2
これはjQueryの非効率的な使用法です。より良い方法は、次のようなIDセレクターで$('#multiple').find(':selected')始めることです:@Prabhagaran
cannot_mutably_borrow

@YounisShah時間差が相対性ものではないので、それが「非効率的」であるとはほとんど言えません...
NorCalKnockOut

0

選択した値をカンマ区切りで取得します

var Accessids = "";
$(".multi_select .btn-group>ul>li input:checked").each(function(i,obj)
{
    Accessids=Accessids+$(obj).val()+",";
});
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);

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