web-dev-qa-db-ja.com

選択ボックスのオプション値をオブジェクトとして設定するコード

私が持っているhtmlページに、値のあるこのような選択ボックスがあります。

<select onChange="return filler(this.value);">
<option value="{'name':'rajiv',age:'40'}">a</option>
<option value="{'name':'mithun',age:'22'}">f</option>
</select>

オプションの値としてJavaScriptの配列またはオブジェクトを渡したいのですが。現在、オプション値を文字列として扱っています。

配列にして、アクセスできるようにしたい

フィラー関数のthis.value.name、this.value.age。

これは可能ですか？

javascriptjqueryhtmlxhtmldhtml
21
mithunsatheesh

オブジェクト/配列をvalue属性に格納することはできませんが、jQuery 1.4.3以降でjsonを自動的にサポートする_data-*_属性を使用するオプションがあります

_<select>
    <option data-value='{"name":"rajiv","age":"40"}'>a</option>
    <option data-value='{"name":"mithun","age":"22"}'>f</option>
</select>
_

そして.change()を使う

_$("select").change(function(){
    alert($(this).find(":selected").data("value").age);
});
_

jsfiddleの例

28
Mark Coleman

いいえ、それだけではありません。値は文字列でなければなりません。私は、jQueryの.data()メソッドのようなものを使用して、ArraysまたはObjectsをexpandoプロパティに保持することを強くお勧めします。

値に含める必要がある場合は、JSONデコード（.parse）するだけです。

var myValue = JSON.parse(this.value);

myValue.age; // 40
myValue.name // rajiv

しかし、これも良い解決策ではないと思います。 http://api.jquery.com/jQuery.data/ もご覧ください。また、JSON文字列をdata- HTML5属性。例えば：

<option value="A" data-info="{'name':'rajiv',age:'40'}">something</option>

ここでjQueryを使用してそのノードにアクセスすると、そのオブジェクトにデータが自動的に展開されます。

$('option').data('info').name; // === rajiv
9
jAndy

parseJSON を使用すると、使用時に文字列をオブジェクトに変換できますが、値は文字列である必要があります。

  var option = $('select').val();
  var selected = $.parseJSON(option);
  alert( selected.name + ': ' + selected.age );
4
tvanfosson