1

複数選択で選択されていないものをカウントしようとしています。しかし、何か問題があるようです。詳細については、フィドルを参照してください..

問題:

  1. Select allとDeselect allボタンを数回クリックしてみると、Select all動作が停止します。
  2. 視覚的には機能しなくなりますが、dom でまだ選択/選択解除されていSelect allます。firebug を使用して確認できます。
  3. domで選択/選択解除している場合、選択解除された要素のカウントが正しくないのはなぜですか?

ノート：

私の問題を確認するには、以下のフィドルでこの正確な順序に従ってください。をクリックしてSelect allからDeselect all 、もう一度Select all. この時点で、DOM/Firebug はオプションが選択されていることを示しています。しかし、カウントを押すと、0 ではなく 4 という結果が得られます。

目的:視覚的に選択されているかどうかは気にしません。私の主な目的は、選択されていないオプションの正しいカウントを取得することです。

JSFIDDLE: http://jsfiddle.net/bababalcksheep/fgfdb/

HTML:

<button id="countdeselected">Count deselected</button>
<button id="selectall">select All</button>
<button id="deselectall">Deselect All</button>
<select name="languages[]" multiple="multiple" class="multiselect" id="languages" style=" ">
    <option value="ALB">Albania</option>
    <option value="DZA">Algeria</option>
    <option value="alfa">Custom1</option>
    <option value="beta">Custom2</option>
</select>
<ul id="status"></ul>

JS:

$("#countdeselected").click(function (event) {
    var dd = $("#languages option:not(:selected)").length
    $('#status').append($('<li>').text(dd));

});

$("#selectall").click(function (event) {
    $("#languages option").attr('selected', 'selected');
});
$("#deselectall").click(function (event) {
    $("#languages option").attr('selected', null);
});
4

1 に答える 1

5

要素の属性とプロパティには違いがあります。属性は初期状態で、プロパティは現在の状態です。

オプションの属性を設定しています。これは、要素に最初から属性がない場合にのみ機能します。その後、プロパティが引き継ぎ、属性を設定しても現在の状態には影響しなくなります。

選択状態を変更する場合は、属性ではなくプロパティを設定します。

$("#selectall").click(function (event) {
    $("#languages option").prop('selected', true);
});
$("#deselectall").click(function (event) {
    $("#languages option").prop('selected', false);
});

デモ: http://jsfiddle.net/Guffa/fgfdb/3/

于 2013-10-27T10:31:28.750 に答える