Setting multiple values for option using javascript (add)

Question

<!DOCTYPE html>
<html>
<body>

<select id='selectid' onchange="selectchange()">

</select>

<script>
for (let i=0;i<10;i++)
{
 var select = document.getElementById("selectid");
    var option = document.createElement("option");
     option.text = "text="+i;
    option.value = i;
    select.add(option);
}
function selectchange()
{
alert(document.getElementById("selectid").value);
}
</script>
</body>
</html>

Description

Here i have been using javascript to add options for my select tag

I Needed

I need to store more than one data using my existing javascript code like for value=1 option need to add another value for the option tag like value2=a, and for value=2 as value2=b

Example syntax

 var select = document.getElementById("selectid");
            var option = document.createElement("option");
             option.text = "text="+i;
            option.value = i;
            option.value2 = a;
            select.add(option);

I need to add two values for my option using the above syntax.

Are you planning to add custom attributes to the option? your best bet is this developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… — Shriji Kondan Elangovan
– Shriji Kondan Elangovan, Commented Dec 18, 2021 at 7:13
I tried to add like (option.data-value2) but it's throwing an error — A. Chithrai
– A. Chithrai, Commented Dec 18, 2021 at 7:18
Do you want your other values to be accessed from the document.getElementById("selectid") ? — aerial
– aerial, Commented Dec 18, 2021 at 7:23
yes, i need to access all of my values but using separate attributes — A. Chithrai
– A. Chithrai, Commented Dec 18, 2021 at 7:30

Rishu kumar · Accepted Answer · 2021-12-18 07:27:29Z

You can try using setAttribute and getAttribute.

<!DOCTYPE html>
<html>
<body>

<select id='selectid' onchange="selectchange()">

</select>

<script>
for (let i=0;i<10;i++) {
 var select = document.getElementById("selectid");
    var option = document.createElement("option");
     option.text = "text="+i;
    option.value = i;
    option.setAttribute("data", Math.random());
    option.setAttribute("data1", `data1_${Math.random()}`);
    select.add(option);
}

function selectchange() {
  const select = document.getElementById("selectid");
  const data = select.options[select.selectedIndex].getAttribute("data");
  const data1 = select.options[select.selectedIndex].getAttribute("data1");
  console.log(`value is: ${select.value} and data is: ${ data } data1 is: ${data1}`);
}
</script>
</body>
</html>

Hope this is what you were looking for!!

Oleg Barabanov · Accepted Answer · 2021-12-18 07:35:29Z

The first solution is to use data attributes:

<!DOCTYPE html>
<html>

<body>

  <select id='selectid' onchange="selectchange()">

  </select>

  <script>
    for (let i = 0; i < 10; i++) {
      var select = document.getElementById("selectid");
      var option = document.createElement("option");
      option.text = "text=" + i;
      option.value = i;
      option.dataset['var-1'] = i;
      option.dataset['var-2'] = 'value2';
      option.dataset['var-3'] = 'value3'; // and etc.
      select.add(option);
    }

    function selectchange() {
      const selectedOption = document.getElementById("selectid").selectedOptions[0]
      console.log(selectedOption.dataset);
    }
  </script>
</body>

</html>

The second solution is to use an external variable to store additional data:

<!DOCTYPE html>
<html>

<body>

  <select id='selectid' onchange="selectchange()">

  </select>

  <script>
    const dataStore = {};

    for (let i = 0; i < 10; i++) {
      var select = document.getElementById("selectid");
      var option = document.createElement("option");
      option.text = "text=" + i;
      option.value = i;
      select.add(option);
      dataStore[i] = {
        var1: i,
        var2: 'var2',
        var3: 'var3'
      };
    }

    function selectchange() {
      const index = document.getElementById("selectid").value
      const value = dataStore[index]
      console.log(value);
    }
  </script>
</body>

</html>

Collectives™ on Stack Overflow

Setting multiple values for option using javascript (add)

Description

I Needed

Example syntax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Description

I Needed

Example syntax

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related