JavaScript, соединяющий несколько раскрывающихся списков

Я новичок в JavaScript, поэтому мне было интересно, есть ли у меня несколько раскрывающихся списков, как я могу отобразить сообщение обо всех сделанных выборах?

Например: у меня есть раскрывающийся список цветов, второй с размерами, третий с количеством. Итак, я хочу отобразить сообщение обо всех выбранных вещах, например: вы выбираете «желтый», «размер M», «2 шт». Как спецификация выбора покупателей.

Я пробовал так:

<script> 
    function dialog() {
        var color= document.getElementById ("color").value;
        var size = document.getElementById ("size").value;
        var amount= document.getElementById ("amount").value;

        document.getElementById("demo").innerHTML="You choose" +color+ "size" +size "in an amount of" +amount+;
    }
</script>

Но это работает, только если у меня есть одно выпадающее меню, а не когда их больше... Спасибо за помощь.


javascript dropdown
person Smilja Smilja    schedule 16.05.2016    source источник
comment
И когда вы хотите показать это сообщение (событие)?   -  person sinisake    schedule 16.05.2016
comment
У вас отсутствует + после +size, и у вас есть дополнительный после +amount. Решит ли это вашу проблему?   -  person Scott    schedule 16.05.2016
comment
На самом деле да. Я действительно не искал синтаксические ошибки. Я искал что-то более сложное. Спасибо,   -  person Smilja Smilja    schedule 16.05.2016

Ответы (2)


arrow_upward
0
arrow_downward

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

<select>
  <option value="unselected">Select a Size</option>
</select>

Затем внутри вашей диалоговой функции проверьте значения, которые вы получили из раскрывающихся списков, чтобы увидеть, соответствуют ли они чему-то другому, кроме «не выбрано»:

if (color != 'unselected' && size != 'unselected' && amount != 'unselected') {
  document.getElementById("demo").innerHTML="You choose" +color+ "size" +size+ "in an amount of" +amount;
}

Таким образом, вы также можете изолировать, какое поле еще не выбрано. Пример:

if (color == 'unselected') {
  alert('You need to select a color');
}
person Rob Brander    schedule 16.05.2016
comment
Спасибо, это тоже очень помогает! - person Smilja Smilja; 16.05.2016

arrow_upward
0
arrow_downward

Вот рабочий фрагмент примера объединенных предложений и правок от Роба Брандера и Скотт Кэй. Суть в том, чтобы иметь изолированный код для пользовательского интерфейса и другой набор кода для проверки, который просто проверяет, не является ли ответ ответом по умолчанию.

Обновить

Per Rob's recommendation, I added an else condition so that the dialog() will clear out the text if the input of all 3 drop lists are invalid. 

function dialog() {
  var color = " " + document.getElementById("color").value + ", ";
  var size = " " + document.getElementById("size").value + ", ";
  var amount = " " + document.getElementById("amount").value + ".";
  var defaultVal = "unselected";
  var colorDefault = document.getElementById("color").value;
  var sizeDefault = document.getElementById("size").value;
  var amountDefault = document.getElementById("amount").value;

  if (colorDefault != defaultVal && sizeDefault != defaultVal && amountDefault != defaultVal) {
    document.getElementById("demo").innerHTML = "You choose color" + color + "size" + size + "in an amount of" + amount;
  } else {
    document.getElementById("demo").innerHTML = "";
  }
}

document.getElementById("color").addEventListener("click", dialog);
document.getElementById("size").addEventListener("click", dialog);
document.getElementById("amount").addEventListener("click", dialog);

document.getElementById("color").addEventListener("mousedown", dialog);
document.getElementById("size").addEventListener("mousedown", dialog);
document.getElementById("amount").addEventListener("mousedown", dialog);

document.getElementById("color").addEventListener("mouseup", dialog);
document.getElementById("size").addEventListener("mouseup", dialog);
document.getElementById("amount").addEventListener("mouseup", dialog);
div {
  width: 80%;
  border: solid 1px #000;
  background-color: #ACE;
  height: 125px;
  margin-top: 10px;
  padding: 3px;
  font-family: arial;
}
<select id='color'>
  <option value="unselected">Color...</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="orange">Orange</option>
</select>
<select id='size'>
  <option value="unselected">Size...</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="32">32</option>
</select>
<select id='amount'>
  <option value="unselected">Amount...</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>
<div id='demo'></div>

person Alexander Dixon    schedule 16.05.2016
comment
Хорошо, но вам нужен какой-то способ запустить диалог(). Возможно, кнопка или событие onchange для каждого из вариантов - person Rob Brander; 16.05.2016