Setting multiple values for option using javascript (add)-CodePudding

<!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.

CodePudding user response：

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!!

CodePudding user response：

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>