如何將多個值添加到列表框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

我使用了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：

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

編輯： 第二種情況

...我現在想做的是，只有一個列表框和一個按鈕。 當用戶單擊按鈕時，第一個值在onchange上被調用，第二個值被調用。 我該怎么辦？

 <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中的一個選項

問題描述

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