web-dev-qa-db-ja.com

JavaScript：新しいOption（）の後に追加の属性を追加します

他の基準に応じて選択フィールドにオプションを動的に追加するコードがあります。次のようになります。

if (chosen == "a_value") {
  selbox.options[selbox.options.length] = new Option('text_1','value_1');
  selbox.options[selbox.options.length] = new Option('text_2','value_2');
  selbox.options[selbox.options.length] = new Option('text_3','value_3');
}

必要なのは、特定の値を含む新しいオプションに追加の属性を追加することです。この場合、属性は「割引」と呼ばれ、値は整数になります。後で属性値を読み取り、Optionフィールドの値に基づいて処理します。

そのため、スクリプトの準備が整うと、オプションは次のようになります。

<option value="value_1" discount="integer">text_1</option>

理にかなっていますか？

では、JSフレームワークを使用せずにこれをどのように行うことができますか。私が必要とするのはコードのこの小さな部分なので、フレームワークはこのプロジェクトにとってはやり過ぎです。

乾杯！ :-)

javascriptattributesoption
19
Léon

あなたは次のようなことができます


var o1 = new Option("key","value");
selbox.options[selbox.options.length] = o1;
o1.setAttribute("key","value");
41
sushil bharwani

これは古いことは知っていますが、今日addではなくPushであることを忘れたときにこの質問に出会いました。

正しい方法は select.options.add 。

 var opt = document.createElement('option');
 opt.value = 'hello';
 opt.text = 'world';
 opt.setAttribute('data-discount', 'integer');
 selbox.options.add(opt);
4
Cory Mawhorter

これを1行のコードに組み合わせることができます。

(selbox.options[selbox.options.length] = new Option("key","value")).setAttribute("key","value");

追加する属性が1つしかない場合にのみ機能することに注意してください。そうでない場合は、一時変数が必要になります。

2
Niet the Dark Absol