Versteckte Dropdown-Optionsfeld verschwindet

Bitte entschuldigen Sie mich, da ich ein neues Mitglied bin. Ich kann den Code nicht richtig funktionieren lassen. Die Auswahloptionen ermöglichen verschiedene Größenauswahl. Wenn die benutzerdefinierte Größe ausgewählt ist, wird ein ausgeblendetes Dropdown-Optionsfeld angezeigt. Das Problem hier ist, sobald das Drop-Down-Optionsfeld ausgewählt ist, verschwindet es. Ich habe seit Monaten versucht, das herauszufinden. Hoffe jemand da draußen kann mir helfen. Mein Vorstoß danke!Versteckte Dropdown-Optionsfeld verschwindet

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

Quelle

2016-06-17 Marrior

Sie die Auswahl beide select Elemente mit jQuery-Selektor. Geben Sie stattdessen die <select> eine id="pick_size". Dann in Ihrem jQuery ändern $("select") zu $("#pick_size") und es würde funktionieren.

Hier ist ein working fiddle.

Quelle

2016-06-17 19:24:59 pmahomme

Wir freuen uns, Ihnen zu helfen und begrüßen zu Stack Overflow. Wenn diese Antwort Ihr Problem gelöst hat, markieren Sie es als akzeptiert. – pmahomme

Versteckte Dropdown-Optionsfeld verschwindet

Antwort

Verwandte Themen