隐藏的下拉选项框一旦选中就会消失

Question

请原谅我，因为我是这里的新成员。我似乎无法使代码正常工作。 select 选项允许各种 selection 大小。如果自定义尺寸是selected，会出现一个隐藏的下拉选项框。这里的问题是一旦下拉选项框被 selected，它就消失了。几个月来我一直在努力解决这个问题。希望有人能帮助我。我提前谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery Show Hide Using Select Box</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("select").change(function() {
        $(this).find("option:selected").each(function() {
          if ($(this).attr("value") == "customsize") {
            $(".customsize").show();
          } else {
            $(".box").hide();
          }
        });
      }).change();
    });
  </script>
</head>
<body>
  <div>
    <select name="product[]" style="display: block; width: 256px; border-color: rgb(204, 204, 204); font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif; font-size: 0.9em; padding: 0.3em;">
      <option>Select Size</option>
      <option style="box-sizing: border-box;" value="30">Chest 30in</option>
      <option style="box-sizing: border-box;" value="32">Chest 32in</option>
      <option style="box-sizing: border-box;" value="34">Chest 34in</option>
      <option style="box-sizing: border-box;" value="36">Chest 36in</option>
      <option style="box-sizing: border-box;" value="38">Chest 38in</option>
      <option style="box-sizing: border-box;" value="40">Chest 40in</option>
      <option value="customsize">Custom Size*</option>
    </select><br />
  </div>
  <div class="customsize box">
    <select name="product[]" style="display: block; width: 256px; border-color: #cccccc; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 0.9em; padding: 0.3em;">
      <option style="box-sizing: border-box;" value=" ">Body Length (in)</option>
      <option style="box-sizing: border-box;" value="30">30</option>
      <option style="box-sizing: border-box;" value="31">31</option>
      <option style="box-sizing: border-box;" value="32">32</option>
      <option style="box-sizing: border-box;" value="33">33</option>
      <option style="box-sizing: border-box;" value="34">34</option>
      <option style="box-sizing: border-box;" value="35">35</option>
      <option style="box-sizing: border-box;" value="36">36</option>
      <option style="box-sizing: border-box;" value="37">37</option>
      <option style="box-sizing: border-box;" value="38">38</option>
      <option style="box-sizing: border-box;" value="39">39</option>
      <option style="box-sizing: border-box;" value="40">40</option>
    </select><br />
  </div>
</body>
</html>

Answer 1

您正在使用 jQuery 选择器选择两个 select 元素。而是给顶部 <select> 一个 id="pick_size"。然后在你的 jQuery 中将 $("select") 更改为 $("#pick_size") 就可以了。

这里是 working fiddle。

隐藏的下拉选项框一旦选中就会消失

Hidden drop-down option box once selected disappears

forms

jquery

dropdownbox

drop-down-menu