Question

我正在使用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>

Answer 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>");
}

Answer 2

检查你的for循环

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

使用此问题将得到解决

Answer 3

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

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

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

$('#brandCombo').empty()

Answer 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>");
            }

    });
});

通过Javascript问题创建选项标记

4 个答案: