相关疑难解决方法(0)

注意:这个问题与Knockout.js无关,但它取决于元素的selectedOptions属性<select>.这是参考:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#dom-select-selectedoptions

我认为这是Javascript开发人员的一个很好的功能.支持非常有限,但无论如何都在增长.Chrome,Opera和Safari应该已经支持它了.

问题是我无法弄清楚它是如何工作的.行为应该非常简单,产生所选选项的实时集合,但结果并非如此.您可以想象selectedOptions每次用户选择一个选项时都会进行更改,对吗？错误.我准备了一个测试用例:

http://jsfiddle.net/f39cC/5/

在这个例子中,Opera 11.64 总是返回所选择的第一个值,无论你做什么,而Chrome 21 dev和19 stable有一个奇怪的行为.执行以下步骤:

1. 选择"一个".在输出和控制台中,您可以获得"One",如预期的那样.
2. 使用Ctrl也选择"Two".在控制台中你得到"一,二",在输出中它仍然是"一".
3. 也选择'三'.在控制台中它是"一,二,三",在输出中它是"一,二".
4. 现在只选择"两个".在控制台中,你得到"Two",输出"Two ,,"(注意两个逗号).

但是,如果您注释掉该console.log行,则始终可以获得正确的输出.你可以在控制台和产量预期的行为,如果你换了两个指令,或者如果你的值存储在一个分隔的字符串,如本:

http://jsfiddle.net/f39cC/2/

那么,我错过了什么selectedOptions吗？依赖这个属性是否为时尚早,可能有一个错误的实现？是否console.log在Chrome中创建了该问题？有什么我不知道HTMLCollection的吗？

我没有安装Safari,有人可以检查一下它的行为吗？

UPDATE 18/2/2013:当事情发生了变化,我不知道,但两者的Chrome 24.0.1312.57和Opera 12.14,似乎现在的工作很好.Firefox 18.0.2和Internet Explorer 10仍然必须实现该属性.

更新2013年 9月17日:Firefox 24和IE 11预览仍然需要支持该属性.这是Firefox和IE8-11的简单解决方法:

Object.defineProperty(HTMLSelectElement.prototype, "selectedOptions", {
    get: (function() {
        try {
            document.querySelector(":checked");
            return function() {
                return this.querySelectorAll(":checked");
            };
        } catch (e) {
            return function() {
                if (!this.multiple) {
                    return this.selectedIndex >= 0
                            ? [this.options[this.selectedIndex]] : …

我今天有一个简单的问题.我有一个选择框,使用户可以选择多个项目.此外,当用户返回页面时,他可以看到他选择了哪些项目,并在必要时取消选择它们.麻烦的是,当我试图取消选择时,选择只是变成灰色; 它不会取消选择.

<select name="MySelect" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

因此,当上面的元素呈现给页面时,我无法取消选择该选项.值仍然是STILL传递给表单.

有帮助吗？

标题似乎令人困惑,但我想做的是......

我知道只有当用户选择新选项时才能处理 - $('select').change(function(){}).`

但是如果用户想要选择已经选择的选项则不行.

我也尝试过radio同样的事情.

好吧,例如我有一个选项(红色,蓝色,绿色).

<select>
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="green">GREEN</option>
</select>

我有这个脚本:

$('select').change(function(){
    var val = $(this).val();
    alert(val);
});

当我选择"蓝色"选项时,它会提示"蓝色"值,然后我选择"绿色",它也会提醒"绿色".但当我再次选择"绿色"时,没有任何反应.