Извините за запутанное название, но в основном мой вопрос: как я могу использовать выделение из одного раскрывающегося меню, чтобы решить, какое выпадающее меню появляется дальше? Я хочу сделать что-то вроде этого:
Выберите меню
вариант # 1
вариант # 2
вариант # 3
Выбор опции # 1 будет открыть еще один меню выбора:
Подвариант # 1,1
Подвариант # 1,2
суб- вариант # 1.3
и то же самое для опций # 2 и # 3, а подпараметр # 1.1 откроет другое меню выбора.
Я думаю, что у меня HTML-код просто отлично, но я очень ржавый с Javascript.
https://jsfiddle.net/mun52n13/
Любые идеи?
В моем коде, замена экрана должен вызывать #devices, которые при выборе Iphone должен вызывать #iphones, выбор Ipad должен вызывать #ipads и т.д.
HTML
Как сделать зависимое меню выбора выпадающего меню показать/скрыть другое меню выпадающего меню с помощью Javascript?
<select name="service" id="service" class="service">
<option>Select a Service</option>
<option value="screen" id="screen">Screen Replacement</option>
<option value="comp" id="comp">Computer Work</option>
<option value="misc" id="misc">Miscellaneous</option>
</select>
<div id="devices">
<select name="devices" id="devices" class="devices">
<option value="iphone" id="iphone">iPhone</option>
<option value="ipad" id="ipad">iPad</option>
<option value="android" id="android">Android</option>
</select>
</div>
<div id="iphones">
<select name="iphone" id="iphone" class="iphone">
<!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
<!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
<option value="iphone6" id="iphone6">iPhone 6</option>
<option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
<option value="iphone5s" id="iphone5s">iPhone 5S</option>
<option value="iphone5c" id="iphone5c">iPhone 5C</option>
<option value="iphone5" id="iphone5">iPhone 5</option>
<option value="iphone4s" id="iphone4s">iPhone 4S</option>
<option value="iphone4" id="iphone4">iPhone 4</option>
</select>
</div>
<div id="ipads">
<select name="ipad" id="ipad" class="ipad">
<option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
<option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
<option value="ipadair" id="ipadair">iPad Air</option>
<option value="ipad4" id="ipad4">iPad 4</option>
<option value="ipad3" id="ipad3">iPad 3</option>
<option value="ipadmini" id="ipadmini">iPad Mini</option>
<option value="ipad2" id="ipad2">iPad 2</option>
</select>
</div>
<div id="computerwork">
<select name="compwork" id="compwork" class="compwork">
<option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
<option value="desktopbuild" id="desktopbuild">Desktop Build</option>
<option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
<option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
<option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
<option value="virusremoval" id="virusremoval">Virus Removal</option>
</select>
</div>
<div id="miscservices">
<select name="miscellaneous" id="miscellaneous" class="miscellaneous">
<option value="networksecurity" id="networksecurity">Network Security</option>
<!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>
</div>
JS
$(document).ready(function(){
$('#service').on('change', function() {
$('#devices').hide();
$('#iphones').hide();
$('#ipads').hide();
$('#computerwork').hide();
$('#miscservices').hide();
if (this.value == 'screen')
{
$("#devices").show();
}
if (this.value == 'iphone')
{
$("#iphones").show();
}
if (this.value == 'ipad')
{
$("#ipads").show();
}
if (this.value == 'comp')
{
$("#computerwork").show();
}
if (this.value == 'misc')
{
$("#miscservices").show();
}
if (this.value == 'comp')
{
$("#computerwork").show();
}
if (this.value == 'miscservices')
{
$("#miscservices").show();
}
});
});
Это идеальный !!Позже сегодня вечером, когда у меня будет время его реализовать, я проверю его, чтобы убедиться, что вы правильно ответили. Большое вам спасибо, это очень аккуратный метод. – Chris
Добро пожаловать, если у вас есть вопросы, не стесняйтесь. –
Работал так, как должен! Теперь, чтобы выяснить, как получить php-часть контактной формы для работы с этим ха-ха. – Chris