动态填充从另一个下拉值中选择下拉列表 [英] Dynamically Populating Drop down list from selection of another drop down value
问题描述
我的要求是，在用餐下拉列表中进行选择时，应该使用与第一个下拉列表中的选择相关的值动态填充第二个下拉列表类别。然后根据用餐下拉菜单中选择的内容，列表应该在类别中更改。我已经写了下面的Javascript函数，但是我得到的输出并不是全新填充第二个下拉列表。在选择更改时，新列表正在追加到旧列表中。
function changecat（）{
var selectHTML =;
var A = [汤，果汁，茶，其他];
var B = [汤，果汁，水，其他];
var C = [汤，果汁，咖啡，茶，其他];
if（document.getElementById（meal）。value ==A）{
var select = document.getElementById（'category'）。options.length;
for（var i = 0; i< select; i ++）{
document.getElementById（'category'）。options.remove（i）;
（var i = 0; i< A.length; i ++）{
var newSelect = document.createElement（'option'）;
selectHTML =< option value ='+ A [i] +'> + A [i] +< / option>;
newSelect.innerHTML = selectHTML;
document.getElementById（'category'）。add（newSelect）;
else if（document.getElementById（meal）。value ==B）{
var select = document.getElementById（' 。类别'）options.length;
for（var i = 0; i< select; i ++）{
document.getElementById（'category'）。options.remove（i）;
}
for（var i = 0; i< B.length; i ++）{
var newSelect = document.createElement（'option'）;
selectHTML =< option value ='+ B [i] +'> + B [i] +< / option>;
newSelect.innerHTML = selectHTML;
document.getElementById（'category'）。add（newSelect）;
else if（document.getElementById（project）。value ==C）{
var select = document.getElementById（' 。类别'）options.length;
for（var i = 0; i< select; i ++）{
document.getElementById（'category'）。options.remove（i）;
（var i = 0; i
selectHTML =< option value ='+ C [i] +'> + C [i] +< / option>;
newSelect.innerHTML = selectHTML;
document.getElementById（'category'）。add（newSelect）;
code
$ b $ hr
HTML-
< option value =>选择< / option>
< option value =A> A< / option>
< option value =B> B< / option>
< option value =C> C< / option>
< / select>
< option value =>选择< / option>
< / select>
解决方案 它可以帮助您
HTML < select name =mealid =mealonChange = changecat（THIS.VALUE）; >
< option value =禁用选择>选择< / option>
< option value =A> A< / option>
< option value =B> B< / option>
< option value =C> C< / option>
< / select>
< select name =categoryid =category>
< option value =禁用选择>选择< / option>
< / select>
JS
var mealsByCategory = {
A：[Soup，Juice，Tea，Others]，
B：[Soup， 果汁，水，其他]，
C：[汤，果汁，咖啡，茶，其他]
}
函数changecat（value）{
if（value.length == 0）document.getElementById（category）。innerHTML =< option>< / option>;
else {
var catOptions =;
for（categoryId in mealsByCategory [value]）{
catOptions + =< option> + mealsByCategory [value] [categoryId] +< / option>;
}
document.getElementById（category）。innerHTML = catOptions;
实际上， JavaScript for ... in循环。
for ... in循环只遍历可枚举的属性。从内置构造函数（如Array和Object）创建的对象
具有从Object.prototype和
String.prototype继承的不可枚举属性，如String的indexOf（）方法或Object的
toString（）方法。循环将迭代对象本身的所有可枚举的
属性，并且这些对象继承自它的
构造函数的原型（接近
原型链中的对象的属性覆盖原型的属性）。
在每次迭代中，object中的一个属性被分配给variable-name，并且这个循环一直持续到对象的所有属性都被耗尽。 / p>
更多链接
My requirement is that for a selection in a 'meal' drop down list, a second drop down list 'category' should get dynamically populated with values related to the selection in first drop down list. Then depending on what is selected in the meal dropdown, the list should change in category. I have written the following Javascript function but the output I'm getting is not freshly populating the 2nd dropdown. On change of a selection, the new list is just getting appended to the old list.
function changecat() {
var selectHTML = "";
var A = ["Soup", "Juice", "Tea", "Others"];
var B = ["Soup", "Juice", "Water", "Others"];
var C = ["Soup", "Juice", "Coffee", "Tea", "Others"];
if (document.getElementById("meal").value == "A") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < A.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + A[i] + "'>" + A[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
else if (document.getElementById("meal").value == "B") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < B.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + B[i] + "'>" + B[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
else if (document.getElementById("project").value == "C") {
var select = document.getElementById('category').options.length;
for (var i = 0; i < select; i++) {
document.getElementById('category').options.remove(i);
}
for (var i = 0; i < C.length; i++) {
var newSelect = document.createElement('option');
selectHTML = "<option value='" + C[i] + "'>" + C[i] + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('category').add(newSelect);
}
}
}
HTML-
<select name="meal" id="meal" onchange="changecat();">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="category" id="category">
<option value="">Select</option>
</select>
解决方案 It might help you
HTML
<select name="meal" id="meal" onChange="changecat(this.value);">
<option value="" disabled selected>Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="category" id="category">
<option value="" disabled selected>Select</option>
</select>
JS
var mealsByCategory = {
A: ["Soup", "Juice", "Tea", "Others"],
B: ["Soup", "Juice", "Water", "Others"],
C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}
function changecat(value) {
if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
else {
var catOptions = "";
for (categoryId in mealsByCategory[value]) {
catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
}
document.getElementById("category").innerHTML = catOptions;
}
}
Actually there is kind of loop supported by JavaScript i.e. for...in loop.
A for...in loop only iterates over enumerable properties. Objects
created from built–in constructors like Array and Object have
inherited non–enumerable properties from Object.prototype and
String.prototype, such as String's indexOf() method or Object's
toString() method. The loop will iterate over all enumerable
properties of the object itself and those the object inherits from its
constructor's prototype (properties closer to the object in the
prototype chain override prototypes' properties).
In each iteration one property from object is assigned to variable-name and this loop continues till all the properties of the object are exhausted.
For more Link
这篇关于动态填充从另一个下拉值中选择下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
