如何使用Javascript创建依赖下拉选择菜单选项显示/隐藏另一个下拉选择菜单？

Question

对于令人困惑的标题感到抱歉，但基本上我的问题是如何使用一个下拉菜单中的选项来决定下一个显示的下拉菜单？我想做这样的事情：
选择菜单
选项＃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

        <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();
      }
    });
});

Answer 1

这是关于如何使你的工作成功的简短原型： 检查js小提琴： https://jsfiddle.net/yehiaawad/mun52n13/6/

从服务中选择设备时选择

=＆GT;服务设备将显示

=＆GT;从设备中选择Iphone时选择

=＆gt;应显示设备-iphone，其余部分将隐藏

（和IPad一样）

HTML：

<select name="service" id="service" class="service">
            <option>Select a Service</option>   
            <option value="screen" data-target="devices" id="screen">Screen Replacement</option>       
            <option value="comp" data-target="comp" id="comp">Computer Work</option> 
            <option value="misc" data-target="misc" id="misc">Miscellaneous</option>
</select>
<div style="display:none" id="service-devices">
        <select name="devices" id="devices" class="devices">
        <option>Select a device</option>       
        <option value="iphone" data-target="iphones" id="iphone">iPhone</option>       
        <option value="ipad"  data-target="ipads" id="ipad">iPad</option>
        <option value="android" id="android">Android</option>
        </select>
<div style="display:none" id="devices-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></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 style="display:none" id="devices-ipads">
        <select name="ipad" id="ipad" class="ipad">
              <option></option>
        <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>
<div style="display:none" id="service-comp">
        <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 style="display:none" id="service-misc">
        <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>

使用Javascript：

$(document).ready(function(){
    $('select').on('change', function() {
       var target=$(this).find(":selected").attr("data-target");
       var id=$(this).attr("id");
       $("div[id^='"+id+"']").hide();
       $("#"+id+"-"+target).show();
    });
});

Answer 2

这是一种方法：https://jsfiddle.net/mun52n13/7/

我创建了一个menu类，一个属性data-parent来设置父菜单，一个属性data-target来设置与此菜单相关联的值。

因此，您可以查找应显示或隐藏的菜单。

CSS：

.menu {
  display: block;
}

.menu.hidden {
  display: none;
}

HTML：

<select name="service" id="service" class="service menu">
  <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>
<select name="devices" id="devices" class="devices menu hidden" data-parent="#service" data-target="screen">
  <option></option>
  <option value="iphone" id="iphone">iPhone</option>
  <option value="ipad" id="ipad">iPad</option>
  <option value="android" id="android">Android</option>
</select>
<select name="iphone" id="iphone" class="iphone menu hidden" data-parent="#devices" data-target="iphone">
  <option></option>
  <!--<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>
<select name="ipad" id="ipad" class="ipad menu hidden" data-parent="#devices" data-target="ipad">
  <option></option>
  <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>
<select name="compwork" id="compwork" class="compwork menu hidden" data-parent="#service" data-target="comp">
  <option></option>
  <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>
<select name="miscellaneous" id="miscellaneous" class="miscellaneous menu hidden" data-parent="#service" data-target="misc">
  <option></option>
  <option value="networksecurity" id="networksecurity">Network Security</option>
  <!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>

JAVASCRIPT：

$(document).ready(function() {
  $('.menu').change(function() {
    var id = this.id;
    var value = this.value;
    if ($(this).css('display') == 'none') {
      $('.menu[data-parent="#' + id + '"]').css('display', 'none').change();
    } else {
      $('.menu[data-parent="#' + id + '"]:not([data-target="' + value + '"])').css('display', 'none').change();
      $('.menu[data-parent="#' + id + '"][data-target="' + value + '"]').css('display', 'block').change();
    }
  });
});