JavaScript: добавить дополнительный атрибут после нового Option () - PullRequest
Новая
       39

JavaScript: добавить дополнительный атрибут после нового Option ()

19 голосов
/ 31 марта 2011

У меня есть фрагмент кода, который динамически добавляет параметры в поле выбора в зависимости от некоторых других критериев. Это выглядит примерно так: 

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. Мне нужна только эта небольшая часть кода, поэтому для этого проекта фреймворк будет излишним.

Ура! : -)

Ответы [ 3 ]

40 голосов
/ 31 марта 2011

вы можете сделать что-то вроде 


var o1 = new Option("key","value");
selbox.options[selbox.options.length] = o1;
o1.setAttribute("key","value");
3 голосов
/ 16 мая 2015

Я знаю, что это старый, но я столкнулся с этим вопросом, когда забыл, что сегодня 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);
2 голосов
/ 16 июля 2012

Вы можете объединить это в одну строку кода: 

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

Обратите внимание, что это будет работать, только если у вас есть только один атрибут для добавления, в противном случае вам понадобится временная переменная.

...