[英]Populate text box using values of two dropdown
我想用預定義的值填充文本框。 此文本框是只讀的。 用戶可以從 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 個值。 目前沒有使用數據庫。
當用戶從任何下拉列表中選擇時,我們如何在文本框中添加價格?
由於您想顯示商品的價格,我在當前對象結構中看不到它。 所以我稍微修改了對象結構。
此外,與新數組相比,我更喜歡使用[]
來創建數組。
同樣,我不喜歡使用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());
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.