使用隐藏和显示自动更新jQuery中的mulitple下拉列表vlues

如何解决使用隐藏和显示自动更新jQuery中的mulitple下拉列表vlues

我有三个下拉菜单,但是最初只有一个下拉菜单可见。 在第一个下拉菜单中选择一个值时,第二个下拉菜单将可见。同样,如果我们为第二个下拉菜单选择一个值,则第三个下拉菜单将可见

每当我重置上一个下拉菜单的值时,我都希望将下一个下拉菜单重置为-请选择-(当前未发生)

例如(我需要此输出)

drop-down 1 
    -- please select --
    option 1.1
    option 1.2
drop-down 2
    -- please select --
    option 2.1 (1.1)
    option 2.2 (1.1)
    option 2.3 (1.1)

    option 2.4 (1.2)
    option 2.5 (1.2)
    option 2.6 (1.2)
    option 2.7 (1.2)

drop-down 3
    -- please select --
    option 3.1 (2.1)
    option 3.2 (2.1)
    option 3.3 (2.1)

    option 3.4 (2.2)
    option 3.5 (2.2)

    option 3.6 (2.3)
    option 3.7 (2.3)

    option 3.8 (2.4)

    option 3.9 (2.5)

    option 3.10 (2.7)
    option 3.11 (2.7)
    option 3.12 (2.7)
    option 3.13 (2.7)
    option 3.14 (2.7)

这是html,略有不同

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label>Dropdown 1</label>
<select name="select1" id="fe296151">
  <option value="" selected="selected" disabled="disabled">Please select</option>
  <option id="main1" value="aaaa-1">aaaa-1</option>
  <option id="main2" value="bbbb-1">bbbb-1</option>
  <option id="" value="cccc-1">cccc-1</option>
</select>
<div id="divselect2">
  <label>Dropdown 2</label>
  <select name="select2" id="fe296152">
    <option value="" selected="selected" disabled="disabled">Please select</option>
    <option id="sub1" class="main1" value="aaaa-1-2.a">aaaa-1-2.a</option>
    <option id="sub1" class="main1" value="aaaa-1-2.b">aaaa-1-2.b</option>
    <option id="sub2" class="main2" value="bbbb-2.a">bbbb-2.a</option>
    <option id="sub2" class="main2" value="bbbb-2.b">bbbb-2.b</option>
    <option id="sub2" class="main2" value="bbbb-2.c">bbbb-2.c</option>
  </select>
</div>
<div id="divselect3">
  <label>Dropdown 3</label>
  <select name="select3" id="fe296154">
    <option value="" selected="selected" disabled="disabled">Please select</option>
    <option id="red1" class="sub2" value="aaaa-3.a">aaaa-3.a</option>
    <option id="" class="sub2" value="aaaa-3.b">aaaa-3.b</option>
    <option id="" class="sub2" value="bbbb-3.c">bbbb-3.c</option>
    <option id="" class="sub2" value="bbbb-3.d">bbbb-3.d</option>
  </select>
</div>
<div id="divselect3a">
  <label>input box</label>
  <input type="text" class="red1" value="" />
</div>
<script type="text/javascript">
$(document).ready(function(){
  $("#divselect2").hide(); 
  $("#divselect3").hide();
  $("#divselect3a").hide();  
 });
$("#fe296151").change(function() {
  if ($(this).data('options') === undefined) {
    $(this).data('options',$('#fe296152 option').clone());
  }
   var fe296151 = $("#fe296151").find(':selected').attr('id');
  if(fe296151) {
    $('#divselect2').show();  
  }
  else {
    $('#divselect2,#divselect3,#divselect3a,#divselect4').hide();  
    }
    var options = $(this).data('options').filter('.'+fe296151);
  $('#fe296152').html(options);   
});
$("#fe296152").change(function() {
  if ($(this).data('options') === undefined) {
    $(this).data('options',$('#fe296154 option').clone());
  }
  var select2 = $("#fe296152").find(':selected').attr('id');
  if(select2) {
    $('#divselect3').show();  
  }
  else {
    $('#divselect3,#divselect4').hide();  
    }
var options = $(this).data('options').filter('.'+fe296152);
  $('#fe296154').html(options);
});
$("#fe296154").change(function() {
 
  var select3 = $("#fe296154").find(':selected').attr('id');
  if(select3) {
    $('#divselect3a').show();  
  }
  else {
    $('#divselect3a').hide();  
    }
});
</script>

解决方法

对于您的问题,我已删除所有不必要的部分。在您的逻辑中,您正在检查所选选项是否没有“ ID”属性,但是“选择”选项被禁用,您无法选择这些值。在我的版本中,我显示并重置了修改后的所有输入元素。

我希望这是您想要的结果。

$(document).ready(function() {

  $("#divselect2").hide();
  $("#divselect3").hide();
  $("#divselect3a").hide();

  $("#fe296151").change(function() {
  /*
    if ($(this).data('options') === undefined) {
      $(this).data('options',$('#fe296152 option').clone());
    }
    */
    
    $('#divselect2').show();
    $('#divselect2 select,#divselect3 select,#divselect3a input[type="text"]').val("");
    $('#divselect3,#divselect3a').hide();
    
    
    //var options = $(this).data('options').filter('.' + fe296151);
    //$('#fe296152').html(options);
  });
  
  
  $("#fe296152").change(function() {
    /*
    if ($(this).data('options') === undefined) {
      $(this).data('options',$('#fe296154 option').clone());
    }
    */
    
    $('#divselect3').show();
    $('#divselect3 select,#divselect3a input[type="text"]').val("");
    $('#divselect3a').hide();
    
    
    /*
    var options = $(this).data('options').filter('.' + fe296152);
    $('#fe296154').html(options);
    */
  });
  
  
  $("#fe296154").change(function() {

    $('#divselect3a').show();
    $('#divselect3a input[type="text"]').val("");
    
  });



});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label>Dropdown 1</label>
<select name="select1" id="fe296151">
  <option value="" selected="selected" disabled="disabled">Please select</option>
  <option id="main1" value="aaaa-1">aaaa-1</option>
  <option id="main2" value="bbbb-1">bbbb-1</option>
  <option id="" value="cccc-1">cccc-1</option>
</select>
<div id="divselect2">
  <label>Dropdown 2</label>
  <select name="select2" id="fe296152">
    <option value="" selected="selected" disabled="disabled">Please select</option>
    <option id="sub1" class="main1" value="aaaa-1-2.a">aaaa-1-2.a</option>
    <option id="sub1" class="main1" value="aaaa-1-2.b">aaaa-1-2.b</option>
    <option id="sub2" class="main2" value="bbbb-2.a">bbbb-2.a</option>
    <option id="sub2" class="main2" value="bbbb-2.b">bbbb-2.b</option>
    <option id="sub2" class="main2" value="bbbb-2.c">bbbb-2.c</option>
  </select>
</div>
<div id="divselect3">
  <label>Dropdown 3</label>
  <select name="select3" id="fe296154">
    <option value="" selected="selected" disabled="disabled">Please select</option>
    <option id="red1" class="sub2" value="aaaa-3.a">aaaa-3.a</option>
    <option id="" class="sub2" value="aaaa-3.b">aaaa-3.b</option>
    <option id="" class="sub2" value="bbbb-3.c">bbbb-3.c</option>
    <option id="" class="sub2" value="bbbb-3.d">bbbb-3.d</option>
  </select>
</div>
<div id="divselect3a">
  <label>input box</label>
  <input type="text" class="red1" value="" />
</div>

,

感谢您的帮助!在这里,我想像这样的隐藏/显示下拉菜单中的选项

drop-down 1 
    -- please select --
    option 1.1
    option 1.2
drop-down 2
    -- please select --
    option 2.1 (if i choose option 1.1,i want to show this option)
    option 2.2 (if i choose option 1.1,i want to show this option)
    option 2.3 (if i choose option 1.1,i want to show this option)

    option 2.4 (if i choose option 1.2,i want to show this option)
    option 2.5 (if i choose option 1.2,i want to show this option)
    option 2.6 (if i choose option 1.2,i want to show this option)
    option 2.7 (if i choose option 1.2,i want to show this option)

drop-down 3
    -- please select --
    option 3.1 (if i choose option 2.1,i want to show this option)
    option 3.2 (if i choose option 2.1,i want to show this option)
    option 3.3 (if i choose option 2.1,i want to show this option)

    option 3.4 (if i choose option 2.2,i want to show this option)
    option 3.5 (if i choose option 2.2,i want to show this option)

    option 3.6 (if i choose option 2.3,i want to show this option)
    option 3.7 (if i choose option 2.3,i want to show this option)

    option 3.8 (if i choose option 2.4,i want to show this option)

    option 3.9 (if i choose option 2.5,i want to show this option)

    option 3.10 (if i choose option 2.7,i want to show this option)
    option 3.11 (if i choose option 2.7,i want to show this option)
    option 3.12 (if i choose option 2.7,i want to show this option)
    option 3.13 (if i choose option 2.7,i want to show this option)
    option 3.14 (if i choose option 2.7,i want to show this option)

注意:下拉菜单3没有(2.6)子选项

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?