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

Posted 2023-02-27

【中文标题】无法从下拉列表中获取值[关闭]

【英文标题】：Cant get the value from Drop down list [closed]

【发布时间】：2021-03-25 00:24:37

【问题描述】：

我将数据从 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>

【问题讨论】：

不要一直重新添加它们？

【参考方案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>

【参考方案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>

【讨论】：

请始终考虑发表评论，解释为什么您的解决方案将解决 OP 的问题。