CODEWITHSUNDEEP
javascriptattributes
user451513
user451513

Reputation:

JavaScript: add extra attribute after new Option()

I have a piece of code that dynamically adds options to a select field depending on some other criteria. It looks somewhat like this:

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');
}

What I need is to add an extra attribute to that new option that contains a specific value. In this case the attribute will be called "discount" and the value will be an integer. Later on I'll read the attribute values and process them based on the value in the Option field.

So an option will look like this, once the script is ready;

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

Makes sense?

Now how can I do this without the use of JS frameworks. It's just this small part of code that I need, so a framework would be overkill for this project.

Cheers! :-)

Upvotes: 29

Views: 93476

Answers (3)

Cory Mawhorter
Cory Mawhorter

Reputation: 1821

I know this is old but I came across this question when I forgot it's add and not push today.

The correct way is to use select.options.add. 

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

Upvotes: 11

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

You can combine this into one line of code:

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

Note that this will only work if you have just one attribute to add, otherwise you will need a temporary variable.

Upvotes: 5

sushil bharwani
sushil bharwani

Reputation: 30187

you can do something like 


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

Upvotes: 55

Related Questions