如何向列表框中的一个选项添加多个值 javascript

Question

目前我有一个列表框，里面有苹果、橘子和梨。其中每一个都有特定的价值。当用户做出选择时，相应的值将显示在页面上。

我想做的是在每个选项上设置两个不同的值。我希望苹果的值是 10000 和 20000，橙子的值是 20000 和 50000，梨的值是 30000 和 20000，我想要两种情况，一种是当用户进行选择并且第一个值显示在页面上时，另一种是显示第二个值的第二种情况。我不知道该怎么做？

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>

Answer 1

做下面的例子，

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>

Answer 2

我使用一组单选按钮来检查它是第一个值还是第二个值：

<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];
}

编辑：第二种情况

...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;
}

如何向列表框中的一个选项添加多个值 javascript

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

javascript

listbox