0

我有几个选择列表都具有相同的内容。我想要的是当一个选项被选中时，它将在其他选项中被禁用。

<div class="social-option">
    <select>
        <option selected="selected" value="facebook">facebook</option>
        <option value="0"></option>
        <option value="twitter">twitter</option><!-- If I select this -->
        <option value="linkedin">linkedin</option>
        <option value="instagram">instagram</option>
        <option value="flickr">flickr</option>
    </select>
</div>
<div class="social-option">
    <select>
        <option selected="selected" value="facebook">facebook</option>
        <option value="0"></option>
        <option value="twitter">twitter</option><!-- then this is disabled -->
        <option value="linkedin">linkedin</option>
        <option value="instagram">instagram</option>
        <option value="flickr">flickr</option>
    </select>
</div>
<div class="social-option">
    <select>
        <option selected="selected" value="facebook">facebook</option>
        <option value="0"></option>
        <option value="twitter">twitter</option><!-- and this also is disabled -->
        <option value="linkedin">linkedin</option>
        <option value="instagram">instagram</option>
        <option value="flickr">flickr</option>
    </select>
</div>​

使用这个：

$('.social-option select').on('change', function () {

    var newSelected = $('option:selected', this).val();
    var newSelectedSiblings = $('.social-option select').find("option[value=" + newSelected + "]");

    newSelectedSiblings.not(this).each(function() { //here is the .not selector that doesn't work
        $(this).attr('disabled', 'disabled');
    });
});

任何想法为什么？


另外，当我将选择器替换为以下内容时，为什么这条线不起作用this：

var newSelectedSiblings = $('.social-option select').find("option[value=" + newSelected + "]");

像这样：

var newSelectedSiblings = $(this).find("option[value=" + newSelected + "]");

因为change选择器是相同的：$('.social-option select').on('change'...

http://jsfiddle.net/ilyaD/4BBcZ/5/


更新

我找到了第一个问题的解决方案：

newSelectedSiblings.not(this)

我用了：

newSelectedSiblings.not('option:selected', this)
4

2 回答 2

2

您的错误是混淆了select标签和option标签。

newSelectedSiblings找到一个选项标签，但this在回调中是选择标签。

所以not什么也不做。

我会尝试修复您的代码，因为它看起来太复杂了，但我无法弄清楚您要做什么。

如果您禁用所有其他选择，除了选定的选择，那么任何人将如何选择它们？

请澄清“所有同级元素，但单击此处的元素”是什么意思-选择标签没有“已单击”属性-那是什么意思？

或者您是否尝试选择除所选标签之外的所有选项标签？做什么的？

$('.social-option select').on('change', function () {
  $('.social-option select').not(this).find('option[name="' + $(this).val() + '"]').attr('disabled', 'disabled'); //make sure none of the options have a " in the value
}

注意：如果您更改选择，则没有提及取消禁用选项。这样做可能会很复杂，因为您没有记录它是什么。

于 2012-07-12T08:39:11.400 回答
2

我会使用该siblings()功能。它做你认为它做的事情：

$(this).siblings().each(function() {
    $(this).attr('disabled', 'disabled');
});

该not()函数不起作用，因为 jQuery 在比较方面很奇怪：

$(this) == $(this) // Returns false
于 2012-07-12T08:26:31.460 回答