Question

我最近开始整理我希望成为一系列下拉菜单的内容。每个的内容 - 除了第一个 - 由上一个下拉菜单中的选择决定。

到目前为止，我已经管理好了前两个工作，我对此非常好。现在我已经走到了尽头。我无法弄清楚如何从第二个下拉菜单中选择第三个下拉菜单。

到目前为止我所拥有的：

<script type='text/javascript'>//<![CDATA[ 
$(function(){
$("#product").change ( function () {
    var targID  = $(this).val ();
    $("div.style-sub-1").hide ();
    $('#' + targID).show ();
} )
});//]]>  

</script>


</head>
<body>
  <div class="ccms_form_element cfdiv_custom" id="style_container_div">
<label>Product: </label><select size="1" id="product" class=" validate['required']" title="" type="select" name="style">
<option value="">Select product</option>
<option value="01">A</option>
<option value="02">B</option>
<option value="03">C</option>
<option value="04">D</option>
<option value="05">E</option>
</select><div class="clear"></div><div id="error-message-style"></div></div>

<div id="01"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Select a module: </label>
    <select>
      <option value="">Select module</option> 
      <option value="01">1</option>
      <option value="02">2</option>
      <option value="03">3</option>
      <option value="04">4</option>
      <option value="05">5</option>
      <option value="06">6</option>        </select>
</div>

<div id="02"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Select a module: </label>
    <select>
      <option value="">Select module</option> 
      <option value="01">1</option>
      <option value="02">2</option>
      <option value="03">3</option>
      <option value="04">4</option>
      <option value="05">5</option>
      <option value="06">6</option>
    </select>
</div>

<div id="###"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>###</label> 
    <select>
      <option value="01">###</option>
      <option value="02">###</option>
      <option value="03">###</option>
      <option value="04">###</option>
    </select>
</div><div class="clear"></div><div id="error-message-style-sub-1"></div></div>



</body>


</html>

从div id="01"中选择一个选项应该会产生第三个下拉菜单，并且与任何其他第二个下拉选项选项相同。

提前感谢您的帮助。

Answer 1

如果您只想显示最后一级下拉菜单，可以给它id并执行以下操作：

$('.style-sub-1 select').change(function(){
    console.log('change');
    $('#lastDropdown').parent().show();
});

Demo

但严重的是，你为什么要给###这样的身份？我认为它根本不是id。

为什么你指定了第二级下拉列表style-sub-1包含最后一级...？

为什么在已经指定类时使用内联样式？无法抗拒自己说HTML是一个没有任何意义的混乱......

根据前两个选项创建第三个下拉菜单

1 个答案: