联动下拉框优化需求：提交时传递对象键而非显示文本

嘿，我看你已经把联动下拉框的核心逻辑搭得很顺畅了，现在就差调整一下<option>的value属性，就能实现提交时传递对象键名而不是显示文本啦！

问题分析 #

你当前的JavaScript代码里，生成<option>时把显示文本赋值给了value属性，所以提交表单时自然会传文本内容。我们只需要把value改成循环里的对象键名（也就是categoryId）就行，显示文本保持不变。

修改方案 #

找到循环生成选项的那行代码，把value的值从mealsByCategory[value][categoryId]替换成categoryId：

原来的代码：

catOptions += "<option value='" + mealsByCategory[value][categoryId] +"'>" + mealsByCategory[value][categoryId] + "</option>";

修改后：

catOptions += "<option value='" + categoryId +"'>" + mealsByCategory[value][categoryId] + "</option>";

这样调整后，下拉框显示的还是原来的文本（比如Juice），但提交表单时category参数就会传递对应的键名（比如two）。

完整代码示例 #

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]) {
      // 这里修改了value属性的值为对应的键名
      catOptions += "<option value='" + categoryId +"'>" + mealsByCategory[value][categoryId] + "</option>";
    }
    document.getElementById("category").innerHTML = catOptions;
  }
}
</script>

你可以测试一下，选择A分类下的Juice，提交表单后URL里的category参数就会是two，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Sharoon Ck