Пожалуйста, извините меня, так как я новый член здесь. Я не могу заставить код работать правильно. Опции выбора позволяют выбрать различные размеры. Если выбран нестандартный размер, появится скрытый раскрывающийся список параметров. Проблема в том, что после выбора раскрывающегося списка он исчезает. Я пытался понять это в течение нескольких месяцев. Надеюсь, кто-то там может помочь мне. Моя авансовая благодарность!
<!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: "Lucida Sans Unicode", "Lucida Grande", 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>