根据另一个下拉列表填充一个下拉列表，并获取“值”，而不是显示值的下拉列表

Question

我正在尝试使两个下拉列表由另一个下拉列表填充

这是代码

HTML

<form type=get action="action.php">
<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>
<input type="submit">
</form>

JavaScript的

<script>

    var mealsByCategory = {
    A : {one:"Soup", two:"Juice"},
    B : {three:"Water", four:"Others"},
    C : {five:"Coffee", six:"Tea"}  
    };

    function changecat(value) {
        if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (categoryId in mealsByCategory[value]) {
                catOptions += "<option value='" + mealsByCategory[value][categoryId] +"'>" + mealsByCategory[value][categoryId] + "</option>";
            }
            document.getElementById("category").innerHTML = catOptions;
        }
    }

</script>

我知道我的Java脚本没有错。

我正在寻找类似下拉列表中的输出必须是对象名称，而在下拉菜单中则是对象值。

即当我单击提交站点时，请转到action.php?meal=B&category=Juice

在这里您可以看到果汁已通过（下降时会下降），而不是果汁，我需要传递果汁的对象名称“ two”

像action.php?meal=B&category=two

Answer 1

将categoryId分配为选项的值

 var mealsByCategory = { A: { one: "Soup", two: "Juice" }, B: { three: "Water", four: "Others" }, C: { five: "Coffee", six: "Tea" } }; function changecat(value) { if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>"; else { var catOptions = ""; for (categoryId in mealsByCategory[value]) { catOptions += "<option value='" + categoryId + "'>" + mealsByCategory[value][categoryId] + "</option>"; } document.getElementById("category").innerHTML = catOptions; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form type=get action="action.php"> <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> <input type="submit"> </form>