javascript - 每次创建新的选择选项

Question

我想每次在通过以下行创建 JSON 的选项列表中重置新值：

var o=document.createElement("option");
document.getElementById("shipTo").options.add(o); 
o.text= address[i];

但是新的选项值被添加到列表中，我希望选项中没有前面的：

var counter;
function GetAddress() {
    var customerId = document.getElementById("invoiceTo").value;
    var xml;
    if (window.XMLHttpRequest) {
        xml = new XMLHttpRequest();
    } else {
        xml = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xml.onreadystatechange = function() {
        if (xml.readyState == 4 && xml.status == 200) {
            var address = JSON.parse(xml.responseText);
            document.getElementById("billingAddress").value = address[0];
            document.getElementById("shipAddress").value = address[0];
            if (counter == 1) { {
                    for (var i = 0; i < address.length; i++) {
                        var removeMe = document.getElementById(o[i]);
                        removeMe.parentNode.removeChild(removeMe);
                        var o = document.createElement("option");
                        document.getElementById("shipTo").options.add(o);
                        o.text = address[i];
                    }
                }
            } else if (counter != 1) {
                for (var i = 0; i < address.length; i++) {
                    var o = document.createElement("option");
                    document.getElementById("shipTo").options.add(o);
                    o.text = address[i];
                }
            }
            counter = 1;
        }
        alert(counter);
    }
    xml.open("GET", "GenerateInvoice?customerId=" + customerId, true);
    xml.send();
}

Answer 1

您需要先清除选项：

var oDDL = document.getElementById("shipTo");
while (oDDL.options.length > 0)
    oDDL.options.remove(0);

Answer 2

function GetAddress()
{
var customerId = document.getElementById("invoiceTo").value;
var xml;
if (window.XMLHttpRequest)
{
xml=new XMLHttpRequest();
}
else
{
xml=new ActiveXObject("Microsoft.XMLHTTP");
}
xml.onreadystatechange= function()
{
if(xml.readyState==4 && xml.status==200)
{
var address= JSON.parse(xml.responseText);
document.getElementById("billingAddress").value=address[0];
document.getElementById("shipAddress").value= address[0];
var oDDL = document.getElementById("shipTo");//ship to id of the select in jsp
while (oDDL.options.length > 0)
{
oDDL.options.remove(0);//clears selects option each time
}
for(var i=0;i<address.length;i++)
{
var o = document.createElement("option");//creates optin
document.getElementById("shipTo").options.add(o);//adds option in the list
o.text= address[i];//inserts text in the option
}
}
}
xml.open("GET","GenerateInvoice?customerId="+customerId,true);
xml.send();
}

Answer 3

如果我理解正确，您想在添加新选项之前从选择元素中清除所有旧选项。

只需设置 options.length = 0;

例子：

 var o = document.createElement("option");
 theSelect.options.length = 0;
 o.text = '400';                    
 theSelect.options.add(o);

http://jsfiddle.net/asaf/77sqX/4/