我想填充一个带有预定义值的文本框。此文本框是只读的。用户可以从2个相互依赖的下拉框中进行选择。所有这些都是bootstrap项目中表单的一部分。
从this获取提示, 我可以先选择填充第二个下拉列表。但是,无法将两者的功能结合起来并将它们链接到文本框。
代码:
<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个值。截至目前尚未使用数据库。
当用户从任何下拉菜单中选择时,我们如何在文本框中添加价格?
答案 0 :(得分:1)
当你想要显示物品的价格时,我没有在当前的物体结构中看到它。所以我稍微修改了对象结构。
与新阵列相比,我更喜欢使用[]
进行数组创建。
同样,我不喜欢使用eval
,而是因为变量是全局可用的,所以它们是window对象的属性。因此,您可以使用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 强>