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

很抱歉标题有点混乱，但基本上我的问题是如何使用一个下拉菜单中的选择来决定下一个显示哪个下拉菜单？我想做这样的事情：选择菜单选项1选项2选项3选择选项1将打开另一个选择菜单：子选项1.1子选项1.2子选项1.3，选项2和3也是这样，然后子选项1.1将打开另一个选择菜单。我想我已经很好地下载了HTML，但是我对Javascript非常生疏。有什么想法吗？在我的代码中，屏幕的更换应该触发设备，当选择iphone应该触发iphone时，选择ipad应该触发ipad，等等。 HTML

---

这是一个关于如何让你的东西工作的简短原型： 检查js小提琴：

从服务选择设备时，请选择

=>服务设备将显示

=>从设备选择Iphone时，选择

=>应显示iPhone设备，其余设备将隐藏

IPad也是如此

HTML:

---

这是一个关于如何让你的东西工作的简短原型： 检查js小提琴：

从服务选择设备时，请选择

=>服务设备将显示

=>从设备选择Iphone时，选择

=>应显示iPhone设备，其余设备将隐藏

IPad也是如此

HTML:

这是一种方法：

我创建了一个菜单类、一个用于设置父菜单的属性数据父级，以及一个用于设置与此菜单关联的值的属性数据目标

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

CSS:

HTML:

这是一种方法：

我创建了一个菜单类、一个用于设置父菜单的属性数据父级，以及一个用于设置与此菜单关联的值的属性数据目标

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

CSS:

HTML:

---

太好了！！今晚晚些时候，当我有时间实施它时，我将测试它，以确保并将您的答案标记为正确。非常感谢你，这是一个非常整洁的方法欢迎如果你有任何问题，不要犹豫，按它应该做的去做！现在来看看如何让联系人表单中的php部分使用这个工具，哈哈，太完美了！！今晚晚些时候，当我有时间实施它时，我将测试它，以确保并将您的答案标记为正确。非常感谢你，这是一个非常整洁的方法欢迎如果你有任何问题，不要犹豫，按它应该做的去做！现在，我们来看看如何让联系人表单的php部分与此配合使用，哈哈。

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

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

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

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

.menu {
  display: block;
}

.menu.hidden {
  display: none;
}

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

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