如何使用javascript在span中添加元素

我通过选择国家来创建下拉列表，并使用javascript动态填充州下拉列表

<div id="ddlState" class='selectBox'>                   
    <span class='selected' id="StatesID">Select a State</span> 
    <span class='selectArrow'>&#9660</span>                         
    <div class="selectOptions" id="stateSelectOption">               
        <span class="selectOption" id="ddlStateText" >Select a State</span>                
    </div>
</div>

选择一个状态
▼                         
选择一个状态

单击国家/地区后，将填充代码如下所示的国家/地区

$('#CountriesID').click(function () {
    var items;
    $('#CountriesID').removeClass("input-validation-error");
    if (!$("select#CountriesID").val() == "Select a Country") {
        document.getElementById("disableasterisk9").style.display = "";
    }
    else {
        document.getElementById("disableasterisk9").style.display = "none";
    }
    var countryid = $('#CountriesID').text();

    $.getJSON(
        "@Url.Action("StateList1", "UserRegistration")" + '/' + countryid, 
        function (data) {                  
            var items = "<span id='ddlStateText'  class='selectOption'>Select a State </span>";
            $.each(data, function (i, state) {
                items += "<span id='ddlStateText' value='" + state.Value + "' class='selectOption'>" + state.Text + "</span>";
            });                  
            $('#stateSelectOption span').html(items);
        }
    );
});

$（'#CountriesID'）。单击（函数（）{
风险值项目；
$（'#CountriesID'）.removeClass（“输入验证错误”）；
if（！$（“选择#CountriesID”）.val（）=“选择一个国家”）{
document.getElementById（“disableasterisk9”）.style.display=“”；
}
否则{
document.getElementById（“disableasterisk9”）.style.display=“无”；
}
var countryid=$（'#CountriesID'）.text（）；
$.getJSON(
“@Url.Action（“StateList1”，“UserRegistration”）”+“/”+countryid，
函数（数据）{
var items=“选择一个状态”；
$。每个（数据、函数（i、状态）{
项目+=“”+状态。文本+“”；
});                  
$（'#stateSelectOption span'）.html（项目）；
}
);
});

该列表已填充，但所选内容无法正常工作。它将在一个跨度标记中呈现所有状态项，因此，对于选择任何元素，所有列表都将处于选中状态

---

我需要选择单个元素，在这一行的代码中可以看到，您正在将html添加到span中，因此只需删除以下内容：

$('#stateSelectOption span').html(items)

行必须如下所示（它将在div中插入代码，而不是span）：

我在JSFIDLE上测试了它：

---

只需删除此处的“span:$（“#stateSelectOption span'）.html（项目）；这应该是：$（'#stateselectionoption'）.html（items）；顺便说一句，您不应该对所有项目使用相同的id。尝试以下操作：items+=“”+state.Text+“”；通过删除span，它不会应用class='selectOption'。由于tht，选择不适用于跨度

$('#stateSelectOption').html(items)