使用两个下拉列表的值填充文本框

Populate text box using values of two dropdown

本文关键字：填充 文本 下拉列表 两个      更新时间：2023-09-26

我想用预定义的值填充一个文本框。此文本框是只读的。用户可以从2个相互依赖的下拉框中进行选择。所有这些都是引导项目中表单的一部分。

以此为线索，我可以通过选择第一个来填充第二个下拉列表。但是，不能将两者的功能结合起来并将它们链接到文本框。

代码：

<select id="cat">
<option val="Laptops">Laptops</option>
<option val="Phones">Phones</option>
<option val="Tablets">Tablets</option>
<option val="PC">PC</option>
</select>
<select id="item"></select>
<input id='price' type='text' readonly/>

javascript:

Laptops=new Array("HP","Dell","Apple","Lenovo");
Phones=new Array('Samsung','Nokia','iPhone');
Tablets=new Array('Apple','Lenovo','Asus','Acer','HP');
PC=new Array('IBM','Macintosh','Dell');
populateSelect();
$(function() {
  $('#cat').change(function(){
    populateSelect();
  });
});
function populateSelect(){
cat=$('#cat').val();
$('#item').html('');
  eval(cat).forEach(function(t) { 
        $('#item').append('<option>'+t+'</option>');
    });
}

我在下拉列表1和2中分别有大约5和4个值。目前尚未使用数据库。

当用户从任何下拉列表中选择时，我们如何在文本框中添加价格？

由于您想显示商品的价格，我在curren对象结构中看不到它。所以我对对象结构做了一些修改。

此外，与新的array相比，我更喜欢使用[]创建数组。

同样，我不喜欢使用eval，因为变量是全局可用的，所以它们是窗口对象的属性。因此，您可以使用window[property]来获得特定的数组。但我更喜欢创建一个新对象，并将所有属性附加到该对象。这样就可以避免污染全局命名空间。

Laptops=new Array({name : "HP", price : 200},{name : "Dell", price : 400},{name : "Apple", price : 400},{name : "Lenovo", price : 200});
Phones=new Array({name : "Samsung", price : 200},{name : "Nokia", price : 400},{name : "Apple", price : 400});
Tablets=new Array({name : "Apple", price : 200},{name : "Acer", price : 400},{name : "Lenovo", price : 400},{name : "Dell", price : 100});
PC=new Array({name : "Macnitosh", price : 200},{name : "Dell", price : 100});

$(function() {
function populateSelect(){
  var value = $("#cat").val();
  if(value) {
    console.log("value"+window[value]);
    $("#item").html("");
    $.each(window[value], function(index, val) {
      $("#item").append("<option value='"+val.price+"'>"+val.name+"</option>");
    });
  }
}
  $('#cat').change(function(){
    populateSelect();
  });
  populateSelect();
  $("body").on("change", "#item", function() {
    $("#price").val($(this).val());
  });
});

DEMO

相关文章：