通过 Javascript 问题创建选项标签答案

【问题标题】：Create option tag via Javascript issue通过 Javascript 问题创建选项标签
【发布时间】：2017-04-10 11:28:48
【问题描述】：

我正在使用 AJAX 从我的数据库中获取一些数据，在 AJAX 成功之后，我尝试通过 JavaScript 创建 <option> 标记，但它似乎不起作用，并且 DOM 没有任何反应，我不知道为什么？

  $("#clientCombo").on("change", function () {
        $.ajax({
            url: "/Account/GetBrands",
            data: { clientID: $("#clientCombo").val() },
            dataType: 'json',
            success: function (result) {
                if (result.error == undefined) {
                    var brandList = result;
                    var brandCombo = $('#brandCombo');
                    var brandOption = $("<option value=\"none\">"+"someString+"+"</option>");
                    brandCombo.html(brandOption);
                    for (var i = 0; i < brandList.length; i++) {
                        brandCombo+=("<option value=\""  + brandList[i].brandID +  ">" + brandList[i].brandName + "</option>");
                    }
                }
                else {
                    $("#brandCombo").html("<option value=\"none\">" + "choose+" + "</option>");
                }
            }
        });
    });

  



<script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
    <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

     <div class="input-group">
            <label class="inputLabel">name</label>
            <select id="clientCombo" class="selectpicker">
                <option value="none">choose</option>
                @foreach (var clientItem in Model.clientList)
                {
                    <option value="@clientItem.ID">@clientItem.ClientName</option>
                }
            </select>
        </div>

        <div class="input-group">
            <label class="inputLabel">brand</label>
            <select id="brandCombo" name="MotagNumber" class="selectpicker">
            </select>
        </div>

我正在使用这个脚本：

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

【问题讨论】：

不要使用 html() 方法或 "+=" 运算符。仅使用 append(htmlString) 方法。例如 $("#brandCombo").append('');

标签： javascript jquery html asp.net razor

【解决方案1】：

您在创建选项字符串时没有使用正确的变量brandOption，并在循环后使用.html()。

var brandOption = $("<option value=\"none\">"+"someString+"+"</option>");   
for (var i = 0; i < brandList.length; i++) {
    brandOption+=("<option value=\""  + brandList[i].brandID +  ">" + brandList[i].brandName + "</option>");
}
brandCombo.html(brandOption); //Once options string is completely created

而不是

var brandOption = $("<option value=\"none\">"+"someString+"+"</option>");
brandCombo.html(brandOption);
for (var i = 0; i < brandList.length; i++) {
    brandCombo+=("<option value=\""  + brandList[i].brandID +  ">" + brandList[i].brandName + "</option>");
}

【讨论】：

遗憾的是它不起作用，尽管我认为您的代码没有问题

【解决方案2】：

检查你的 for 循环

brandOption+="<option value=\""  + brandList[i].brandID +  "\">" + brandList[i].brandName + "</option>";

使用这个问题就解决了

【讨论】：

【解决方案3】：

你应该使用Jquery内置函数而不是字符串连接.append() - 将参数指定的内容插入到匹配元素集中每个元素的末尾。 p>

$('#brandCombo').append('<option value='+brandList[i].brandID+'>'+brandList[i].brandName+'</option>')

您还可以使用.empty() 从下拉列表中清除所有<option> 标签。如下所示

$('#brandCombo').empty()

【讨论】：

【解决方案4】：

试试下面的代码

$(document).on("change","#clientCombo", function () {
    $.ajax({
        url: "/Account/GetBrands",
        data: { clientID: $("#clientCombo").val() },
        dataType: 'json',
        success: function (result) {
            if (result.error == undefined) {
                var brandList = result; 

            var brandCombo= $('<select>');
            for (var i=0;   i<brandList.length  ;i++) 
            {
                 brandCombo.append( $('<option><option>').val(brandList[i].brandID).html(brandList[i].brandName) );
              }
             $('#brandCombo').append(brandCombo.html());


            }
            else {
                $("#brandCombo").html("<option value=\"none\">choose</option>");
            }

    });
});

【讨论】：