IE javascript:当选项被点击时，从选择多个中移除选项节点

IE javascript: Remove option node from a select multiple when option is clicked

本文关键字：选项 选择 节点 javascript IE      更新时间：2023-09-26

我有一个代码，当选项被单击时，从选择多个(<select multiple></select>)标记中删除选项元素。代码的工作方式如下:

var option = new Option("sometext","someval");
$(option).click( function(){
                selectBox.remove(option);
                return false;
            }
        );
$(selectBox).append(option);

它在我记得的所有引擎(gecko, presto, webkit…)上都能很好地工作，除了IE。

根据我的研究，IE不支持将事件添加到选项标签，所以我将事件添加到选择标签。

$(selectBox).click( function(event){
                if (option === selectBox.options[selectBox.selectedIndex]) {
                    event.preventDefault();
                    event.stopPropagation();
                    selectBox.remove(option);
                    return false;
                }
                event.preventDefault();
                return true;
            }
        );

式中:if (option === selectBox.options[selectBox.selectedIndex]) {
我已经试过了:if ($(option).is(':selected')) {
也没用。

发生了什么:当我点击一个选项时，所有绑定的函数都被激活，并且可以在元素被删除后激活函数。
使用event.stopPropagation();(传播确实继续，无论如何)似乎没有做我想做的事情，因为所有其他事件也被调用。将事件从click更改为change并不能解决问题，因为当选定的选项被更改时，它会被删除，然后选定的选项成为另一个选项，导致再次调用事件，最后，选中的所有元素都被删除。

试试下面的代码;假设selectBox是一个DOM元素、一个JQuery对象或一个指向<select>元素的CSS选择器:

$(selectBox).click(function(){
    var selectedOption = this.selectedIndex;
    $("option", selectBox).each(function(index){
        if(index == selectedOption){
            $(this).remove();
            return false; //Stop looping
        }
    });
})

被选中的选项通过元素的selectedIndex属性被引用。当循环遍历每个选项时，将在某一点上找到所选的选项。当找到该元素时，删除该选项，并使用return false终止循环。

不使用.click，我建议使用.change，这样通过键盘(方向键+制表键)进行选择更改也可以处理。

相关文章：