jquery选择选项多选一次工作

Question

我有chrome / jquery mobile的问题。在Internet Explorer中，脚本似乎运行良好。

这是jsfiddle example

问题是当我点击它之后从BOTH列表中选择多个项目就可以了。当我第二次这样做时，列表不再被清除。

HTML code：

    <!-- Select Multiple -->
<div class="control-group" style="float: left;">
  <label class="control-label" for="selectmultiple">Licentie Man</label>
  <div class="controls">
    <select id="maleLicense" style="height: 210px;" name="maleLicense" class="input-medium" multiple="multiple">
    <option value="l0000000000000000000100">Amateur</option>
    <option value="l0000000000000000000001">Basislid</option>
    <option value="l0000000000000000001000">Belofte</option>
    <option value="l0000000000000000010000">Elite</option>
    <option value="l0000000000000000100000">Jeugd</option>
    <option value="l0000000000000001000000">Junior 1e jaars</option>
    <option value="l0000000000000010000000">Junior 2e jaars</option>
    <option value="l0000000000000100000000">Nieuweling 1e jaars</option>
    <option value="l0000000000001000000000">Nieuweling 2e jaars</option>
    <option value="l0000000000100000000000">Professional-A</option>
    <option value="l0000000000010000000000">Professional-B</option>
    <option value="l0000000001000000000000">Sportklasse</option>
    </select>
  </div>
  </div>

<!-- Select Multiple -->
<div class="control-group">
  <label class="control-label" for="selectmultiple">Licentie Vrouw&nbsp;&nbsp;&nbsp;
</label>
  <div class="controls">
    <select id="femaleLicense" style="height: 210px;" name="femaleLicense" class="input-medium" multiple="multiple">
    <option value="l0000000010000000000000">Amateur</option>
    <option value="l0000000000000000000010">Basislid</option>
    <option value="l0000000100000000000000">Belofte</option>
    <option value="l0000001000000000000000">Elite</option>
    <option value="l0000010000000000000000">Jeugd</option>
    <option value="l0000100000000000000000">Junior 1e jaars</option>
    <option value="l0001000000000000000000">Junior 2e jaars</option>
    <option value="l0010000000000000000000">Nieuweling 1e jaars</option>
    <option value="l0100000000000000000000">Nieuweling 2e jaars</option>
    <option value="l1000000000000000000000">Professional-B</option>
    </select>
  </div>
</div>
<a id="click">empty input</a>

Jquery代码：

$(document).ready(function() {
$("a#click").click(function(){
    "use strict";
    $('#maleLicense').children(':selected').removeProp('selected');
    $('#femaleLicense').children(':selected').removeProp('selected');
});
});

显示我的视觉意义的图片：

Answer 1

尝试 .prop（'selected'，false）而不是http://api.jquery.com/prop/），我觉得它很好用

$(document).ready(function() {
  $("a#click").click(function(){
    $('#maleLicense').children(':selected').prop('selected', false);
    $('#femaleLicense').children(':selected').prop('selected', false);
  });
});

更新了jsfiddle：http://jsfiddle.net/7x9BT/3/

Answer 2

使用removeAttr，如下所示：

$(document).ready(function() {
    $("a#click").click(function() {
        "use strict";
        $('#maleLicense option:selected').removeAttr('selected');
        $('#femaleLicense option:selected').removeAttr('selected');
    });
});

<强> jsFiddle

Answer 3

而不是removeAttr，我使用$("#maleLicense").val(null);，一切正常。

这是小提琴。 http://jsfiddle.net/7x9BT/5/