Question

我目前有一个下拉菜单，显示3个选项。用户选择一个选项后，将根据第一个菜单中的选择显示另一个下拉菜单。

第一个下拉菜单（直径）：

                <label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)          


                <select id="InDiameter" name="InDiameter">
                  <option value="N/A">Select</option>
                  <option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
                  <option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
                  <option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
                </select>
                </label>

第二个下拉菜单（标准）：

<label for="standard"> <br>1a. Inner Diameter for Standard:          


                <select id="Standard" name="Standard">
                  <option value="N/A">Select</option>
                  <option value="1mm">1mm</option>
                  <option value="1.5mm">1.5mm</option>
                  <option value="2mm">2mm</option>
                  <option value="2.5mm">2.5mm</option>
                  <option value="3mm">3mm</option>
                  <option value="3.5mm">3.5mm</option>
                  <option value="4mm">4mm</option>
                  <option value="5mm">5mm</option>
                </select>
                </label>

我尝试了几种js解决方案，但没有一个起作用。任何帮助，将不胜感激。

Answer 1

在这种情况下，您需要一些javascript和jquery代码：

html代码：

   <label >Select:</label>
   <select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
     <option value="N/A">Select</option>
     <option value="Standard">Standard(1.0-5.0mm)</option>
     <option value="Microcuff">Microcuff(0.3-0.75mm)</option>
     <option value="Nanocuffs">Nanocuffs(56-250μm)</option>
  </select>

  <div id="selectStandar" style="display:none;">
  <label>Standard:</label>
    <select id="Standard" name="Standard">
      <option>Select</option>
      <option value="1mm">1mm</option>
      <option value="1.5mm">1.5mm</option>
      <option value="2mm">2mm</option>
      <option value="2.5mm">2.5mm</option>
      <option value="3mm">3mm</option>
      <option value="3.5mm">3.5mm</option>
      <option value="4mm">4mm</option>
      <option value="5mm">5mm</option>
    </select>
  </div>

  <div id="selectMicrocuff" style="display:none;">
    <label>Microcuff:</label>
  <select id="Microcuff" name="Microcuff">
     <option value="1">Microcuff 1</option>
     <option value="2">Microcuff 2</option>
  </select>
  </div>

代码jquery和Javascript

  function miFuncion(value_selected){
    if (value_selected=='Standard'){
        $("#selectStandar").show();
      $("#selectMicrocuff").hide();
    }

    if (value_selected=='Microcuff'){
        $("#selectMicrocuff").show();
      $("#selectStandar").hide();
    }

  }//end function

在这种情况下，我验证第一个select（InDiameter），取该值，如果是Standard，则显示具有select的div以及Standard..and等选项。只有一种方法存在差异方法。 Verify here

标签的动态下拉菜单

1 个答案: