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

时间:2012-12-05 14:35:14

标签: javascript jquery model-view-controller

我通过选择国家/地区来获取下拉列表,使用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);
        }
    );
});

列表已填充但选择不正常它会渲染一个span标记中的所有状态项,以便选择任何元素所有列表都被选中

我需要选择单个元素

1 个答案:

答案 0 :(得分:0)

在这一行的代码中看到的是你在跨度中添加你的html,所以只需要拿走:

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

该行必须如下所示(它会将代码插入div而不是span中):

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

我在jsfiddle上测试了它: http://jsfiddle.net/uz2vf/