jQuery技术:使用jquery取消隐藏或返回多个选择的选定选项

伙计我正在创建一个代码,一旦选中,将删除另一个下拉列表中的选定选项,我使用jQuery(jquery-1.10.1.min)但我不知道如何能够返回所选的选项或数字一旦用户改变主意。

你能帮我么? 提前致谢。

这是我的脚本:

HTML

 None 01 02 03 04   None 01 02 03 04   None 01 02 03 04   None 01 02 03 04  

使用Javascript

 $(window).load(function(){ $('#question_order1').on('change', function() { var val=this.value; $("#question_order2").find("option:contains("+val+")").remove(); $("#question_order3").find("option:contains("+val+")").remove(); $("#question_order4").find("option:contains("+val+")").remove(); }); $('#question_order2').on('change', function() { var val=this.value; $("#question_order1").find("option:contains("+val+")").remove(); $("#question_order3").find("option:contains("+val+")").remove(); $("#question_order4").find("option:contains("+val+")").remove(); }); $('#question_order3').on('change', function() { var val=this.value; $("#question_order1").find("option:contains("+val+")").remove(); $("#question_order2").find("option:contains("+val+")").remove(); $("#question_order4").find("option:contains("+val+")").remove(); }); $('#question_order4').on('change', function() { var val=this.value; $("#question_order1").find("option:contains("+val+")").remove(); $("#question_order2").find("option:contains("+val+")").remove(); $("#question_order3").find("option:contains("+val+")").remove(); }); });//]]> 

    这是一个首先存储 html副本的解决方案。 在更改它会创建一个包含所有选定值的数组。 然后它从存储的html重建所有其他的并过滤允许的值。

     $(function () { var $quest = $('.question_order'); /* cache option html */ var optHtml = $quest.first().html(); $quest.on('change', function () { /* make array of all selected values*/ var selecteds=$quest.find('option:selected').map(function(){ if(this.value){ return this.value } }).get(); /* rebuild the other select elements*/ $quest.not(this).each(function(){ var selVal=this.value || ''; /* create new set of options with filtered values*/ var $opts=$(optHtml).filter(function(){ return $.inArray(this.value,selecteds) ==-1 || this.value ==selVal }); /* replace children*/ $(this).html($opts).val(selVal); }); }); }); 

    请注意, class="question_order"添加到每个元素。

    DEMO

    试试这个

         

    演示

      以上就是jQuery教程分享使用jquery取消隐藏或返回多个选择的选定选项相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

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

      ctvol管理联系方式QQ:251552304

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

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

      精彩推荐