标签的动态下拉菜单答案

【问题标题】：dynamic drop down menu for labels标签的动态下拉菜单
【发布时间】：2018-07-17 19:40:44
【问题描述】：

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

第一个下拉菜单（InDiameter）：

                <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 解决方案，但都没有奏效。任何帮助，将不胜感激。

【问题讨论】：

如果您尝试过“几种 js 解决方案”，发布它们。

标签： javascript jquery html

【解决方案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

在这种情况下，我验证第一个选择（InDiameter），取值，如果是标准，我会显示具有选择标准的 div 等选项。只是一种方法存在不同的方法.. Verify here

【讨论】：