堆栈内存溢出
  简体   繁体   English

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

[英]How do I make a dependent dropdown select menu choice show/hide another dropdown select menu using Javascript?

 原文  2016-03-12 17:47:31  8   2    javascript/ jquery/ html/ drop-down-menu

问题描述

Sorry about the confusing title, but basically my question is how do I use the selection from one dropdown menu to decide which dropdown menu shows up next? 抱歉，标题令人困惑，但基本上我的问题是如何使用一个下拉菜单中的选择内容确定接下来显示哪个下拉菜单？ I want to do something like this: 我想做这样的事情：
Select menu 选择菜单
option #1 选项1
option #2 选项＃2
option #3 选项＃3
Selecting option #1 would open another select menu: 选择选项＃1将打开另一个选择菜单：
sub-option #1.1 子选项＃1.1
sub-option #1.2 子选项＃1.2
sub-option #1.3 子选项＃1.3
and the same thing for options #2 and #3, and THEN sub-option #1.1 would open another select menu. 选项＃2和＃3的操作相同，则子选项＃1.1将打开另一个选择菜单。
I think I have the HTML down just fine, but I'm extremely rusty with Javascript. 我认为我的HTML很好，但是我对Javascript非常不满意。
https://jsfiddle.net/mun52n13/ https://jsfiddle.net/mun52n13/
Any ideas? 有任何想法吗？
In my code, screen replacement should trigger #devices which, when selecting iphone should trigger #iphones, selecting ipad should trigger #ipads, and etc. 在我的代码中，屏幕更换应触发#devices，当选择iphone时应触发#iphone，选择ipad时应触发#ipads，依此类推。
HTML 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 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();
      }
    });
});

2 个解决方案

解决方案1
 1 已采纳  2016-03-12 18:50:35

That is a short prototype on how to make your thing work : check the js fiddle: https://jsfiddle.net/yehiaawad/mun52n13/6/ 这是一个关于如何让你的事情发挥作用的简短原型：检查js小提琴： https ： //jsfiddle.net/yehiaawad/mun52n13/6/

When you select devices from services select 从服务中选择设备时，请选择

=> services-devices would display =>服务设备将显示

=> when selecting Iphone from devices select =>从设备中选择Iphone时，请选择

=>devices-iphones should be displayed and the rest would be hidden => devices-iphones应该显示，其余的将被隐藏

(the same thing with IPad) （与iPad相同）

HTML: 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: 使用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();
    });
});

解决方案2
 -1  2016-03-12 19:23:37

This is a way to do it: https://jsfiddle.net/mun52n13/7/ 这是一种方法： https ： //jsfiddle.net/mun52n13/7/

I created a menu class, a attribute data-parent to set the parent menu, and a attribute data-target to set the value associated with this menu. 我创建了一个menu类别，属性data-parent设置父菜单，以及属性data-target来设定与该菜单关联的值。

So you can look for which menu should be shown or hidden. 因此，您可以查找应显示或隐藏的菜单。

CSS: CSS： 

.menu {
  display: block;
}

.menu.hidden {
  display: none;
}

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在 select 更改时显示隐藏下拉菜单 - show hide dropdown menu on select change 如何使一个下拉菜单依赖于另一个 - How to make one dropdown menu dependent on another 如何显示基于第一个选择下拉菜单的选择下拉菜单 - How can I show a select dropdown menu based on the first select dropdown menu Select 下拉菜单值或文本使用 Javascript - Select Dropdown menu value or text using Javascript 使用javascript选择下拉菜单选项 - Select dropdown menu option with javascript 如何使用Select2 4.0向左打开下拉菜单 - How to make dropdown menu open left using Select2 4.0 如何使用 select 选项制作多级下拉菜单 - How to make multi level dropdown menu using select option mentod 如何隐藏下拉菜单？ - How do I hide my dropdown menu? 如何通过使用 javascript 在外部单击来隐藏下拉菜单 - how can i hide dropdown menu by clicking outside using javascript 如何使用选择下拉菜单更改元素 - How to change an element using a select dropdown menu
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM