在JavaScript中删除列表框的值

有多个选项删除ListBox中使用JavaScript的要求。用户可以选择多个项目，从一个ListBox。一旦按下删除按钮，删除所有从ComboBox中选定的值。

 

现在对这个问题的最直观的解决方案将遍历每个选项从ListBox中删除它，如果它被选中。因此，一会写下面这段HTML和的。

 

的HTML

定义一个id简单的列表框lsbox和两个按钮，删除和重置。

    

        

            India

            United States

            China

            Italy

            Germany

            Canada

            France

            United Kingdom

        

    

    

        Delete

        Reset

    

下面是JavaScript代码。

 

（不正确）的JavaScript

function listbox_remove(sourceID) {

 

    //get the listbox object from id.

    var src = document.getElementById(sourceID);

 

    //iterate through each option of the listbox

    for(var count = 0; count < src.options.length; count--) {

         //if the option is selected, delete the option

        if(src.options[count].selected == true) {

 

                try {

                         src.remove(count, null);

                        

                 } catch(error) {

                        

                        src.remove(count);

                }

        }

    }

}

就是这样吧？等等，这不会正常工作。每次您使用src.remove（）方法删除一个选项，其余选项的指数将下降1。所以，如果你选择了多个值删除，这不会表现得如你预期。

 

看下面的演示：

 

演示：不正确的方法

在下面的演示中，我们用正常的方式（以上的JavaScript）删除选项。

 

因此，我们知道现在的问题。每个值被删除时，指数期权递减。所以理想的方法必须是在相反的方向遍历列表框选项。因此，我们开始与最后的选择和迭代，直到第一。

 

正确的JavaScript

注意行的循环：XX。我们遍历方向相反。

function listbox_remove(sourceID) {

 

    //get the listbox object from id.

    var src = document.getElementById(sourceID);

  

    //iterate through each option of the listbox

    for(var count= src.options.length-1; count >= 0; count--) {

 

         //if the option is selected, delete the option

        if(src.options[count].selected == true) {

  

                try {

                         src.remove(count, null);

                         

                 } catch(error) {

                         

                         src.remove(count);

                }

        }

    }

}
以下是正确的JavaScript演示。

 

演示：正确的方法

在下面的演示中，我们用正确的方法（JavaScript）的删除值。