javascript - custom tag containing data in option -

i having list of stuff user can select. way it's made, have integer name, price value need add color. it's not unique cannot use id.

example :

<option name='6' value="30.95">6 orange(30.95$/month)</option> <option name='6' value="33.95">6 green(33.95$/month)</option> <option name='10' value="32.95">10 orange(32.95$/month)</option> <option name='10' value="35.95">10 green(35.95$/month)</option> 

i need combine 2 non-unique values , them accessible jquery / javascript

i not make 2 selects. know it's straightforward easiest solution if stick single 1 give better results.

is safe create custom tag "prodcolor" non-reserved nametag or there smarter way achieve this?

many once again.

you can use html5 data- attributes, invented purpose. more importantly, values of data- attributes can accessed using js.

since want include colour, can use data-colour attribute, example:

<option name='6' value="30.95" data-colour="orange">6 orange(30.95$/month)</option> <option name='6' value="33.95" data-colour="green">6 green(33.95$/month)</option> <option name='10' value="32.95" data-colour="orange">10 orange(32.95$/month)</option> <option name='10' value="35.95" data-colour="green">10 green(35.95$/month)</option> 

even better: actually, shouldn't use name attribute store quantity. why not use data-quantity instead? :)

<option data-quantity="6" value="30.95" data-colour="orange">6 orange(30.95$/month)</option> <option data-quantity="6" value="33.95" data-colour="green">6 green(33.95$/month)</option> <option data-quantity="10" value="32.95" data-colour="orange">10 orange(32.95$/month)</option> <option data-quantity="10" value="35.95" data-colour="green">10 green(35.95$/month)</option> 

---

some background:

there's nice guide published mozilla on how use js access such attributes. note recommended use dash (-) separated attributes, instead of other naming convention, e.g. data-product-name instead of data-productname. because .dataset method in js converts dash-separated data attributes camelcase. data-product-name accessible via .dataset.productname, example.

jquery allows access values of data- attributes via .attr() or .data() methods. difference that:

• .attr() not cached, can use access dynamically-modified data- attributes, while .data reads data attributes @ runtime.
• .attr() can used read and write data attributes, .data() can used read data attributes dom. .data() used access jquery data object not written dom.

---

usage example:

using code above, can create simple example of alerting colour of product upon firing of change event:

$(function() {    $('select').change(function() {      var $choice = $(this).find('option:selected')      alert('colour: ' + $choice.attr('data-colour') + '\n' + 'price: $' + $choice.val());    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <select>    <option name='6' value="30.95" data-colour="orange">6 orange(30.95$/month)</option>    <option name='6' value="33.95" data-colour="green">6 green(33.95$/month)</option>    <option name='10' value="32.95" data-colour="orange">10 orange(32.95$/month)</option>    <option name='10' value="35.95" data-colour="green">10 green(35.95$/month)</option>  </select>