通过Javascript问题

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

检查您的循环

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

    }); 
});