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

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脚本没有错。

我正在寻找输出，如下拉值必须是对象名称，并在dropdrown中的对象值。

即当我点击提交网站去action.php?meal=B&category=Juice

在这里，您可以看到果汁通过（出现在下拉列表中）而不是它我需要传递“两个”，这是果汁的对象名称

像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>