隱藏的下拉選項框一旦選中就消失

請原諒我，因爲我是這裏的新成員。我似乎無法使代碼正常工作。選擇選項可以選擇各種尺寸。如果選擇了自定義尺寸，則會出現一個隱藏的下拉選項框。這裏的問題是，一旦下拉選項框被選中，它就會消失。我一直試圖弄清楚這幾個月。希望有人能幫助我。我的提前謝謝！隱藏的下拉選項框一旦選中就消失

<!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>

來源

2016-06-17 Marrior

你選擇這兩個select元素與你的jQuery選擇。而是給頂部<select>一個id="pick_size"。然後在您的jQuery更改$("select")到$("#pick_size")，它會工作。

這裏是working fiddle。

來源

2016-06-17 19:24:59 pmahomme

樂意幫忙，歡迎來到Stack Overflow。如果此答案解決了您的問題，請將其標記爲已接受。 – pmahomme

隱藏的下拉選項框一旦選中就消失

回答

相關問題