如何将多个值添加到列表框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. 我希望苹果的值是10000，也要20000，橙子的值是20000和50000，梨的值是30000和20000，并且我想有两种情况，一种是当用户进行选择时，第一个值显示在页面上，第二个场景显示第二个值。 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>

Answer 1

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>

Answer 2

I have used a set radio buttons to check if it is a first or second value: 我使用了set单选按钮来检查它是第一个还是第二个值：

<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: 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. 当用户单击按钮时，第一个值在onchange上被调用，第二个值被调用。 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: 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中的一个选项

问题描述

2 个解决方案

解决方案1
0 已采纳

解决方案2
0 2019-01-03 10:37:59

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

问题描述

2 个解决方案

解决方案1 0 已采纳

解决方案2 0 2019-01-03 10:37:59

解决方案1
0 已采纳

解决方案2
0 2019-01-03 10:37:59