jQuery技术:仅使用jquery或javascript的条件下拉列表

仅使用jquery或javascript的条件下拉列表

场景:我有一个主下拉列表,如果我在下拉列表中选择’dropdownmain1’,它将显示’dropdownmain1’的下拉列表对应的值

 dropdownmain1 dropdownmain2 dropdownmain3 dropdownmain4  //if selected dropdownmain1 this dropdown will display  dropdownmain1-submenu1 dropdownmain1-submenu2 dropdownmain1-submenu3 dropdownmain1-submenu4  //if selected dropdownmain2 this dropdown will display  dropdownmain2-submenu1 dropdownmain2-submenu2 dropdownmain2-submenu3 dropdownmain2-submenu4  //if selected dropdownmain3 this dropdown will display  dropdownmain3-submenu1 dropdownmain3-submenu2 dropdownmain3-submenu3 dropdownmain3-submenu4  //if selected dropdownmain4 this dropdown will display  dropdownmain4-submenu1 dropdownmain4-submenu2 dropdownmain4-submenu3 dropdownmain4-submenu4  

这可能只使用jquery或javascript吗?

    是的,您可以使用jquery轻松完成。

     $('select[name!="dropdownmain"]').hide(); $('select[name="' + $('select[name="dropdownmain"]').val() + '"]').show(); $('select[name="dropdownmain"]').change(function(){ $('select[name!="dropdownmain"]').hide(); $('select[name="' + $(this).val() + '"]').show(); }); 

    更可读的方法:

     var $topSelect = $('select[name="dropdownmain"]'); var $nestedSelects = $('select[name!="dropdownmain"]'); showApplicableSelect(); $topSelect.change(showApplicableSelect); function showApplicableSelect() { $nestedSelects.hide(); $('select[name="' + $topSelect.val() + '"]').show(); } 

      以上就是jQuery教程分享仅使用jquery或javascript的条件下拉列表相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/547796.html

      (0)
      上一篇 2021年1月13日
      下一篇 2021年1月13日

      精彩推荐