CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Quardah
Quardah

Reputation: 323

custom tag containing data in option

I am having a list of stuff that the user can select. The way it's currently made, we have an integer as name, a price as value but i need to add a color. It's not unique so i 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 to combine two non-unique values and them to be accessible by jQuery / Javascript

I would like not to make two selects. I know it's straightforward the easiest solution but if i could stick to a single one that would give better results.

Is it safe to create a custom tag like "prodcolor" with any non-reserved nametag or is there a smarter way to achieve this?

Many thanks once again.

Upvotes: 3

Views: 69

Answers (1)

Terry
Terry

Reputation: 66103

You can use HTML5 data- attributes, which is invented for this very purpose. More importantly, the values of the data- attributes can be accessed using JS.

Since you want to include colour, you can use the data-colour attribute, for 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, you shouldn't even use the name attribute to store your 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 a nice guide published by Mozilla on how to use JS to access such attributes. Note that it is recommended to use dash (-) separated attributes, instead of any other naming convention, e.g. data-product-name instead of data-productName. This is because the .dataset method in JS converts dash-separated data attributes into camelCase. So data-product-name will be accessible via .dataset.productName, for example.

jQuery also allows you to access the values of data- attributes via the .attr() or .data() methods. The only difference is that:

  • .attr() is not cached, so you can use it to access dynamically-modified data- attributes, while .data only reads data attributes at runtime.
  • .attr() can be used to read and write data attributes, but .data() can only be used to read data attributes from the DOM. .data() is also used to access the jQuery data object that is not written to the DOM.

Usage example:

Using your code above, we can create a simple example of alerting the colour of the product upon the firing of the 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>

Upvotes: 7

Related Questions