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

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

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.

Таким образом, вариант будет выглядеть так, как только script будет готов;

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

Имеет смысл?

Теперь, как я могу это сделать без использования JS-фреймворков. Это всего лишь эта небольшая часть кода, которая мне нужна, поэтому для этого проекта будет излишним фреймворк.

Ура!: -)

Ответ 1

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


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

Ответ 2

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

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

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

Ответ 3

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