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

Question

很抱歉标题令人困惑，但基本上我的问题是如何使用一个下拉菜单中的选择来决定接下来显示哪个下拉菜单？我想做这样的事情:
选择菜单
选项#1
选项#2
选项#3
选择选项#1将打开另一个选择菜单:
子选项#1.1
子选项#1.2
子选项#1.3
选项#2和#3也是如此，然后子选项#1.1将打开另一个选择菜单。
I我认为 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

这是一个关于如何让你的东西工作的简短原型(prototype):检查js fiddle : https://jsfiddle.net/yehiaawad/mun52n13/6/

当您从服务中选择设备时，请选择

=> 将显示服务设备

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

=>devices-iphones 应显示，其余部分将隐藏

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