how to add multiple values to one option in a listbox javascript

Question

Currently I have a listbox with apples, oranges and pears in it. Each one of those has a specific value. When the user makes a selection the corresponding value gets displayed on the page.

What I want to do is instead put two different values on each option. I want apples to have the value of 10000 and also 20000 and oranges 20000 and 50000 and pears 30000 and 20000, and I want to have two scenarios , one where when the user makes a selection and the first value gets displayed on the page and a second scenario where the second value gets displayed. I'm not sure how to do it ?

function test() {

  var a = document.getElementById("listboxtest").selectedIndex;
  var b = document.getElementById("listboxtest").options;
  var c = (b[a].value);

  document.getElementById("demo").innerHTML = c;
}

<p id="demo"></p>

<form>
  <select id="listboxtest" onchange="test()">

    <option value=10000> apples </option>
    <option value=20000> oranges </option>
    <option value=30000> pears </option>

  </select>
  <form>

If you are not sure, how should we know? You want two buttons? A checkbox? What? — mplungjan, Jan 03 '19 at 08:38
To have two values you can do `value="200000|500000" ` and split on `|` — mplungjan, Jan 03 '19 at 08:40
You can refer below link https://stackoverflow.com/questions/3245967/can-an-option-in-a-select-tag-carry-multiple-values/3245995 — NPE, Jan 03 '19 at 08:40
There will be troubles at the server-side when trying to select a correct value from multiple values. Use a separate JS data array, and fetch the values based on the index which is stored to the select element. — Teemu, Jan 03 '19 at 08:45

score 0 · Accepted Answer · 2019-01-04T09:44:38.353

do the below example,

var index = 0;
function test() {
  var a = document.getElementById("listboxtest").selectedIndex;
  var b = document.getElementById("listboxtest").options;
  var c = (b [a].value.split(',')[index]);
  document.getElementById("demo").innerHTML = c;
  index = 0;
}

function test2() { 
  index = 1;
  test();
  
}
test();

.button { 
  cursor:pointer;
  border:1px solid grey;
  padding:6px 12px;
  background-color:#e8e8e8;
  border-radius:5px;
}

#listboxtest {
  padding:6px 12px;
  border-radius:5px;
}

<p id="demo"></p>

<form>
<select id = "listboxtest" onchange = "test()">
  <option value = '10000,20000'> apples </option>
  <option value = '20000,50000'> oranges </option>
  <option value = '30000,80000'> pears </option>
</select>
<span class="button" onclick="test2()">Change Value</span>
<form>

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and a button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ? — timjest1234, Jan 04 '19 at 08:57
@timjest1234 updated my code, upvote and accept my answer if it works — , Jan 04 '19 at 09:45

prasad_ · Answer 2 · 2019-01-04T13:00:29.550

I have used a set radio buttons to check if it is a first or second value:

<form>
    <p>Select your choice to display value:</p>
    <div>
        <input type="radio" id="choice1" name="val" value="0" onchange="test()">
        <label for="choice1">First value</label>
        <input type="radio" id="choice2" name="val" value="1" onchange="test()">
        <label for="choice2">Second value</label>
    </div>
    <br>
    <select id="listboxtest" onchange="test()">
        <option value='10000|20000'> apples </option>
        <option value='20000|50000'> oranges </option>
        <option value='30000|20000'> pears </option>
    </select>
    <br><br>
    Result: <p id="result"></p>
</form>

<script src="test.js"></script>

test.js:

function test() {
    let a = document.getElementById("listboxtest").selectedIndex;
    let b = document.getElementById("listboxtest").options;
    let tokens = (b[a].value).split("|");
    let x = document.querySelector('input[name="val"]:checked').value;
    document.getElementById("result").innerHTML = tokens[x];
}

EDIT: Second Scenario

...what im trying to do now is , to just have one listbox and one button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ?

<body onload="test()">
<form>     
    <p>Select your choice or click button:</p>
    <select id="listbox" onchange="test(this.id)">
        <option value='apples'> apples </option>
        <option value='oranges'> oranges </option>
        <option value='pears'> pears </option>
    </select>
    <br><br>
    <button id="button" type="button" onclick="test(this.id)">Press</button>
    <br><br>
    Result: <p id="result"></p>
</form>

<script src="test.js"></script>

test.js:

function test(elementId = 'formload') {

    var selectionValues = [];
    selectionValues['apples'] = {first: 10000, second: 20000};
    selectionValues['oranges'] = {first: 20000, second: 50000};
    selectionValues['pears'] = {first: 30000, second: 20000};

    var listVal = document.getElementById("listbox").value;
    var result = null;

    switch(elementId) {
        case 'formload': // same as selected value of list box
                         // this is when the page is refreshed
        case 'listbox':
            result = selectionValues[listVal].first;
            break;
        case 'button':
            result = selectionValues[listVal].second;
            break;   
    }

    document.getElementById("result").innerHTML = result;
}

thank you . it was just what I wanted. what im trying to do now is , to just have one listbox and one button . the first value gets called on the onchange and the second value gets called when the user clicks the button. how could i do this ? — timjest1234, Jan 04 '19 at 08:58
@timjest1234 I have posted a solution. I hope you can use it _or_ some aspects of both the solutions to find a solution of your own. — prasad_, Jan 04 '19 at 12:43

how to add multiple values to one option in a listbox javascript

2 Answers2