Блог

Я довольно новичок в этом деле, и у меня как бы заканчиваются идеи, как это сделать.

Вот ситуация; для инструмента-калькулятора мне нужно создать каскадное выпадающее меню, в котором второй выбранный параметр соответствует значению, которое затем следует использовать в качестве переменной в формуле. Моя проблема в настоящее время заключается в том, что я не знаю, как присвоить значение каждому параметру. Я думаю, что смогу разобраться с остальной частью кода, но я застрял на этом на некоторое время.

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

 <script>
    function dynamicdropdown(listindex)
    {
    document.getElementById("Model").length = 0;
    switch (listindex)
    {
    case "Mazda" :
        document.getElementById("model").options[0]=new Option("Select Model","");
        document.getElementById("model").options[1]=new Option("MX-5","MX-5");
        document.getElementById("model").options[2]=new Option("RX-7","RX-7");
        document.getElementById("model").options[3]=new Option("323","323");
        document.getElementById("model").options[4]=new Option("626","626");
        document.getElementById("model").options[5]=new Option("MX-6","MX-6");
        break;
    case "Subaru" :
        document.getElementById("model").options[0]=new Option("Please select model","");
        document.getElementById("model").options[1]=new Option("Impreza","Impreza");
        document.getElementById("model").options[2]=new Option("Forester","Forester");
        break;
    case "Nissan" :
        document.getElementById("model").options[0]=new Option("Please select model","");
        document.getElementById("model").options[1]=new Option("350Z","350Z");
        document.getElementById("model").options[2]=new Option("370Z","370Z");
        document.getElementById("model").options[3]=new Option("Pulsar","Pulsar");
        document.getElementById("model").options[4]=new Option("GT-R","GT-R");
        document.getElementById("model").options[5]=new Option("Skyline","Skyline");
      }
    return true;
    }
    </script>
<div class="category_div" id="category_div">Select manufacturer:
                <select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                <option value="">Select manufacturer</option>
                <option value="Mazda">Mazda</option>
                <option value="Subaru">Subaru</option>
                <option value="Nissan">Nissan</option>
<div class="category_div" id="category_div">Select manufacturer:
                <select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                <option value="">Select manufacturer</option>
                <option value="Mazda">Mazda</option>
                <option value="Subaru">Subaru</option>
                <option value="Nissan">Nissan</option>
               </select>
            </div>
 

Я приношу свои извинения, если я допустил какие-либо ошибки при изменении кода, чтобы сделать его не относящимся к проекту. Как я уже сказал, я довольно новичок в этом, поэтому, пожалуйста, будьте добры 🙂

Вы можете передать событие в свою функцию, указав this в качестве аргумента в HTML (см. onchange В HTML ниже). Когда мы вызываем test функцию в коде JavaScript, передается аргумент события, который содержит всю информацию о вашем выпадающем меню. Он event.value содержит ваш выбор, поэтому вы можете использовать его, чтобы определить, какое значение вы хотели бы добавить.

язык JavaScript:

 const test = (event) => {
  let toAdd = 0
  if (event.value == "Nissan") toAdd = 10
  if (event.value == "Subaru") toAdd = 5
  console.log(5   toAdd)
}
 

HTML:

 <div class="category_div" id="category_div">
      Select manufacturer:
    <select name="category" class="required-entry" id="category" onchange="test(this)">
      <option value="">Select manufacturer</option>
      <option value="Mazda">Mazda</option>
      <option value="Subaru">Subaru</option>
      <option value="Nissan">Nissan</option>
  </select>
</div>
 

Если вы хотите сделать свой код более плавным, вы можете деструктировать свойство value в начале функции, чтобы вы могли писать value в фигурных скобках в качестве аргумента, а не event . Тогда вы можете ссылаться value на движение вперед, а event.value не …

 const test = ({value}) => {
 

и…

 if (value == "Nissan") toAdd = 10
 

Вот ручка с кодом выше