How can i give numbering for option values

Question

The below is my code but i want to give number for every value like this <option value="1" />vijay

But apple+ should be there because i want to assign some values using jquery thats i want to add + value as we can modify <option value="1" />vijay

but due to my template design i want to give like this <option value="1" value=vijay+/>vijay i dont think it is correct what is the correct format.

<select id="cmbColumn">
    <option value="" />Columns
    <option value="apple+" />apple
    <option value="berry+" />berry
</select>

<select id="cmbSidebar" name="cmbSidebar">
    <option value="" />Sidebars
    <option value="grapes+" />grapes
    <option value="mango+" />mango               
</select>

my main aim is to achieve for example like for all values apple+ and apple and also giving number to the values.

This is my other code but i want to give numbering to values like this but like i above said i also need grapes+ values with them

<select id="cmbsidebar">
    <option value="1" />vijay
    <option value="2"/>1004045

</select>

<select id="combo-014">
    <option value="1" />1003045
    <option value="2" />1004045

</select>

`option` tag comes with a closing tab which is ``. You should use it (even if it does not answer your question). The closing tag is optional but it's a better practice to use closing tags when you have "content" that comes inside it. — ADreNaLiNe-DJ, Jul 06 '16 at 13:11
Could you explain a little more about what you're trying to do, as your question is not clear at all. — Rory McCrossan, Jul 06 '16 at 13:12
Iam using blogger platform if we close with tag it wont display tag again i mean it closes before the values like above i mean blogger are in xml format — overflowstack9, Jul 06 '16 at 13:12
Use [data attributes](https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes) ! — Pugazh, Jul 06 '16 at 13:14
Sounds like you need a hashmap to match values to your other number. What higher level problem are you trying to solve? Where do these numbers come from? — charlietfl, Jul 06 '16 at 13:15
@charlietfl getting to the point for example this is my code apple i want to assign number to the value how can i do this without changing the code — overflowstack9, Jul 06 '16 at 13:17
What number? What will it be used for? Where does it come from? This sounds like an XY problem — charlietfl, Jul 06 '16 at 13:18
The below is the answer what i need but i use jquery for doing ... — overflowstack9, Jul 06 '16 at 13:23

score 1 · Answer 1 · answered Jul 06 '16 at 13:22

1

You can use data attributes to have additional values. Check below example by changing the option!

$(function() {
  $('select').change(function() {
    var $this = $(this).find("option:selected");
    var value = $this.val();
    var num = $this.attr('data-num');
    alert("Value: " + value + "\nNumber: " + num);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cmbColumn">
  <option data-num="1" value="">Columns</option>
  <option data-num="2" value="apple+">apple</option>
  <option data-num="3" value="berry+">berry</option>
</select>

<select id="cmbSidebar" name="cmbSidebar">
  <option data-num="1" value="">Sidebars</option>
  <option data-num="2" value="grapes+">grapes</option>
  <option data-num="3" value="mango+">mango</option>
</select>

answered Jul 06 '16 at 13:22

Pugazh

9,453
5
33
54

but i need jquery to add this...? i mean to add number i need jquery........code......? – overflowstack9 Jul 06 '16 at 13:24
To access the **number** you would need JavaScript or jQuery. My solution is using jQuery, whereas **xxxmatko**'s solution is using JavaScript – Pugazh Jul 06 '16 at 13:27
i have referred to this http://stackoverflow.com/questions/3245967/can-an-option-in-a-select-tag-carry-multiple-values is they correct way.....? without javascript or jquery – overflowstack9 Jul 06 '16 at 13:39
Yeah, that's a great way! – Pugazh Jul 06 '16 at 13:57

score 0 · Accepted Answer · answered Jul 06 '16 at 13:19

0

You can use data attributes together with the value attribute like this:

document.getElementById("options").onchange = function(e) {
  // Get the selected option element
  var target = e.explicitOriginalTarget;
  
  // Get its value
  console.info(target.getAttribute("value"));
  
  // Get its data-value
  console.info(target.getAttribute("data-value"));
}

<select id="options">
  <option value="">Sidebars</option>
  <option value="1" data-value="grapes+">grapes</option>
  <option value="2" data-value="mango+">mango</option>
</select>

answered Jul 06 '16 at 13:19

xxxmatko

4,017
2
17
24

As you wish, but there is no need for that. – xxxmatko Jul 06 '16 at 13:24
we can also assign data-value without jquery as you said.....? @xxxmatko – overflowstack9 Jul 06 '16 at 13:26

How can i give numbering for option values

2 Answers2