jQuery を使用して HTML <select/> でキーと値のペアをまとめて保持しますか?

StackOverflow https://stackoverflow.com/questions/27219

  •  09-06-2019
  •  | 
  •  

質問

jQuery で複数のオプションを指定した選択を指定します。

$select = $("<select></select>");
$select.append("<option>Jason</option>") //Key = 1
       .append("<option>John</option>") //Key = 32
       .append("<option>Paul</option>") //Key = 423

キーはどのように保管および取得する必要がありますか?

ID は問題ないかもしれませんが、複数の選択で値を共有している場合 (およびその他のシナリオ)、一意であることは保証されません。

ありがとう

そしてTMTOWTDIの精神に基づいて。

$option = $("<option></option>");
$select = $("<select></select>");
$select.addOption = function(value,text){
    $(this).append($("<option/>").val(value).text(text));
};

$select.append($option.val(1).text("Jason").clone())
       .append("<option value=32>John</option>")
       .append($("<option/>").val(423).text("Paul"))
       .addOption("321","Lenny");
役に立ちましたか?

解決

ルーカスが言ったように、value 属性が必要なものです。コードを使用すると、次のようになります(フィットするように選択に id 属性を追加しました)。

$select = $('<select id="mySelect"></select>');
$select.append('<option value="1">Jason</option>') //Key = 1
   .append('<option value="32">John</option>') //Key = 32
   .append('<option value="423">Paul</option>') //Key = 423

jQuery では、val() メソッドを使用して値を取得できます。これを選択タグで使用すると、現在選択されているオプションの値を取得できます。

$( '#mySelect' ).val(); //Gets the value for the current selected option

$( '#mySelect > option' ).each( function( index, option ) {
    option.val(); //The value for each individual option
} );

念のため、.each メソッドはクエリが一致したすべての要素をループします。

他のヒント

HTML <option> タグには「value」という属性があり、そこにキーを保存できます。

例えば。:

<option value=1>Jason</option>

これが jQuery でどのように動作するかはわかりません (私は使用しません) が、それでも役立つことを願っています。

HTML5 を使用している場合は、 カスタムデータ属性. 。次のようになります。

$select = $("<select></select>");
$select.append("<option data-key=\"1\">Jason</option>") //Key = 1
   .append("<option data-key=\"32\">John</option>") //Key = 32
   .append("<option data-key=\"423\">Paul</option>") //Key = 423

次に、選択したキーを取得するには、次のようにします。

var key = $('select option:selected').attr('data-key');

または、XHTML を使用している場合は、カスタム名前空間を作成できます。

キーは繰り返すことができると言っているので、value 属性を使用することはおそらくオプションではありません。そうすれば、同じ値を持つさまざまなオプションのどれがフォーム投稿で選択されたかを知ることができないからです。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top