无法从下拉列表中获取值[关闭]

Question

我将数据从 json 填充到下拉列表。

$(function() {     
            $('#productList').append($('<option/>').attr("value", key).text(data[key].productName));
            
    })

这里的数据是 json 对象。当我执行此操作时，只要我关闭并打开下拉列表，该值就会成倍增加。 为了防止这种情况发生

$('#productList').empty();

但现在的问题是当我选择一个选项并关闭它重置的下拉菜单时。 那么如何在不重复选项的情况下选择一个选项并获得它的值。 提前致谢

我的html代码是

<label>Select The Product:</label><select id="productList">
</select>

Answer 1

尝试使用 for 循环：

Read More about for loop

$(document).ready(function(){
        var data = [
    {
        productName: "Product 1",
        value: "000"
    },
    {
        productName: "Product 2",
        value: "001"
    },
    {
        productName: "Product 3",
        value: "002"
    },
    {
        productName: "Product 4",
        value: "004"
    },
    {
        productName: "Product 5",
        value: "005"
    },
    {
        productName: "Product 6",
        value: "006"
    },
    {
        productName: "Product 7",
        value: "007"
    }
];

var count = data.length;
for(var i = 0; i< count; i++){
    $('#productList').append('<option>'+data[i]['productName']+'</option')
}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Select The Product:</label>
<select id="productList">

</select>

Answer 2

let data = [{
    "name": "product 1",
    "price": "100"
  },
  {
    "name": "product 2",
    "price": "200"
  },
  {
    "name": "product 3",
    "price": "500"
  }
];

$(function() {    
  $.each(data, function (key, value) {
    $('#product')
    .append($('<option/>')
    .attr("value", key)
    .text(data[key].name));
    
  })        
            
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="product" name="product">
</select>