jQuery< select>如果在多个< select>中选择，则该选项被禁用盒子 [英] jQuery <select> option disabled if selected in multiple <select> boxes

问题描述

我有一个类似的问题: jQuery< select>如果在其他< select>

I have a question similar to the one asked here: jQuery <select> option disabled if selected in other <select>

但是，我的情况有所不同，将有两个以上的选择框.在提供的答案中，选择一个选项后，在其他选择框中将其设置为禁用"(我希望发生这种情况)，但是我不希望在其他选择框中选择的其他任何选项都已被禁用.

But, mine varies in that there will be more than two select boxes. In the answer provided, when an option is selected, it is set to disabled in the other select boxes (which I want to happen), but I don't want any other options selected in a different select box to have disabled removed.

这有意义吗?

示例html:

<div>
<select name="homepage_select_first">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
</div>
<div>
<select name="homepage_select_second">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
</div>
<div>
<select name="homepage_select_third">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>    
</div>

还有jQuery:

$('select[name*="homepage_select"]').change(function() {

    var value = $(this).val();
    alert(value);
    $('select[name*="homepage_select"]').children('option').each(function(){
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true)//.siblings().removeAttr('disabled');  

        }
    });

});

注释.siblings().removeAttr('disabled')根本不会删除禁用的属性...但是，我只想删除它，除非在任何选择框中都没有选中它.

Commenting out .siblings().removeAttr('disabled') simply never removes the disabled attribute...but, I want to remove it ONLY if it isn't selected in any one of the select boxes.

基本上，我只希望一次在一个选择中选择一个选项.我认为，如果我只能对刚刚更改的项目执行.removeAttr('disabled')，那将是可行的.但是，我不确定该怎么做.

Basically, I only want an option to be selected in one of the selects at a time. I would think that if I could only .removeAttr('disabled') on the item that was just changed, I think that would work. But, I'm not sure how to go about this.

有人有什么想法吗?

谢谢！

推荐答案

这应该可以做到.基本上是您的评论所要求的-确保所有3个选择都有唯一的选择.一旦在1个selext框中进行选择，其他选项就不再可用.

This should do it. Basically does what your comments ask - ensures that all 3 selects have unique selections. Once a selection is made in 1 selext box that option is no longer available in the others.

$('select[name*="homepage_select"]').change(function(){


    // start by setting everything to enabled
    $('select[name*="homepage_select"] option').attr('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="homepage_select"]').each(function(){
        var $this = $(this);
        $('select[name*="homepage_select"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val())
               $(this).attr('disabled',true);
        });
    });

});

实时示例: http://jsfiddle.net/QKy4Y/

这篇关于jQuery&lt; select&gt;如果在多个&lt; select&gt;中选择，则该选项被禁用盒子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！