4

HTMLには次のような非常に単純な要素があります。

<select multiple="multiple" size="19" name="Title[book_types_array][]" id="Title_book_types_array">
    <option value="0">None Selected</option>
    <option value="1" selected="selected">Textbook School</option>
    <option value="2">Textbook Undergraduate</option>
</select>

そして、私は魔法のようにシングルクリックの複数選択を可能にするJQueryを少し持っています：

$('select[multiple] option').click(function(e){
   var self = $(this);
   e.preventDefault();
   if (self.attr('selected'))
       self.removeAttr('selected');
   else
       self.attr('selected', 'selected');
});

そして、これはFirefoxでうまく機能しますが、Chromeでは機能しません。

技術的にはChromeで動作しますが、要素は更新されません。例として、2つのオプションを選択してから選択を解除しても、選択済みとして表示されます。ただし、要素で新しいオプションを選択すると、以前に選択を解除した2つの要素が正しく更新され、選択が解除されます。また、別のウィンドウをクリックしてからもう一度戻ると、要素が更新されます。

これは、この要素を持つChromeのある種のバグですか、それとも私が見逃しているものがありますか？

編集

コンソールを見ると、選択した属性がどのように削除されているかがわかりますが、要素が更新されていないだけです。

追加された例：http：//jsfiddle.net/Udf5c/

4

2 に答える 2

3

あなたの問題が非常に興味深いので、私はその主題についていくつかの調査を行いました。attr() の代わりに prop() を使用する方が良いようです。http://ejohn.org/blog/jquery-16-and-attr/

また、この投稿はおそらくあなたに役立つでしょう：jQuery、Chrome、および「選択された」属性の異常 

    $('select[multiple] option').mousedown(function(e){
   var self = $(this);
   e.preventDefault();
console.log(self.attr('selected'));

   if ( self.is(':selected'))
        self.prop('selected', false);
   else
        self.prop('selected', 'selected');

});

これは、私がクロムで試した実際の例です: http://jsfiddle.net/7sZUj/ お役に立てば幸いです。

于 2013-03-21T13:08:34.653 に答える
0

OK、IE は対象外なので、これを試してみてください: http://jsfiddle.net/Udf5c/5/

$('select[multiple] option').mousedown(function(e){

    var sel = $(this).parent('select');
    var opt = $(this);

    var pushTarget = false;

    var selectedOptions = sel.find('option:selected');

    if (opt.attr('selected')) {
        selectedOptions = 
            $($.grep(selectedOptions, function(val) {
                return $(val).val() != opt.val();
            }));

    } else {
        selectedOptions.push(opt);
    }

    sel.children().each(function() {
        $(this).attr('selected', false); 
    });

    selectedOptions.each(function() {
        var o = sel.find('option[value="' + $(this).val() + '"]');
        o.attr('selected', 'selected');
    });

   e.preventDefault();
});

選択されたものをチェックし、すべての選択を解除して、必要なものを再選択します。:)

于 2013-03-21T12:33:22.320 に答える