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ます。

newSelectedSiblingsoption タグを見つけますがthis、コールバックには select タグがあります。

だから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');
});

比較に関してはjQueryが奇妙であるため、not()関数は機能しません。

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