Как добавить несколько значений для одного параметра в списке JavaScript - PullRequest
Новая
       1

Как добавить несколько значений для одного параметра в списке JavaScript

0 голосов
/ 03 января 2019

В настоящее время у меня есть список с яблоками, апельсинами и грушами в нем.Каждый из них имеет определенную ценность.Когда пользователь делает выбор, соответствующее значение отображается на странице.

Я хочу вместо этого поставить два разных значения для каждого параметра.Я хочу, чтобы яблоки имели значение 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>

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Я использовал набор переключателей, чтобы проверить, является ли оно первым или вторым значением: 

<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;
}
0 голосов
/ 03 января 2019

сделать приведенный ниже пример, 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...