javascript - 如何在 JQuery 中使用动态值填充 <select> 元素？

Question

我有 5 个具有相同类的选择元素。

    <select class="form-control rating"></select>
    <select class="form-control rating"></select>
    <select class="form-control rating"></select>
    <select class="form-control rating"></select>
    <select class="form-control rating"></select>

我想使用 jQuery 为它们填充动态评级值。 喜欢:rateArr=[5,2,2,3,5]

我真正想要的，像这样:

    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
    </select>
    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
    </select>
    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
    </select>
    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
    </select>
    <select class="form-control rating">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
    </select>

但是想不通怎么解决。到目前为止我正在尝试:

$('.rating').each(function(index,row){ 
    for(i=1; i<= rateArr[index]; i++){
         $(this).append($("<option</option>").text(i).val(i));
    }
});

Answer 1

您在 $("<option</option>") 中的 html 格式错误.开始标签缺少 >

尝试

var rateArr=[5,2,2,3,5]

$('.rating').each(function(index,row){ 
    for(var i=1; i<= rateArr[index]; i++){
         $(this).append($("<option>").text(i).val(i));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control rating"></select>
<select class="form-control rating"></select>
<select class="form-control rating"></select>
<select class="form-control rating"></select>
<select class="form-control rating"></select>