创建类似的下拉菜单使输出（innerHTML）未定义（jquery）

Question

嘿嘿，我想要 2 个内容相似的下拉菜单。只要版本 2 不存在，版本 1 就可以工作。一旦我包含 version2，只有 version2 的输出被正确识别，并且 version1 的输出显示为“未定义”。谁能帮我？Version1*html<select id="Store">  <option value="noSelection">Snippet</option>  <option value="test1">Test1</option>  <option value="test2">Test2</option></select><span id="Adress"></span>*scriptvar Store = document.getElementById("Store"),Adress = document.getElementById("Adress"),stores = {  noSelection: "",  Test1: "Test1",  Test2: "Test2",}```Store.onchange = function(){snippetMobile.innerHTML = stores[this.value];}Version2*html<select id="Gas">  <option value="noSelection">Snippet</option>  <option value="test1">Test1</option>  <option value="test2">Test2</option></select><span id="Number"></span>*scriptvar Gas = document.getElementById("Gas"),Number = document.getElementById("Number"),stores = {  noSelection: "",  Test3: "Test3",  Test4: "Test4",}Gas.onchange = function(){Number.innerHTML = stores[this.value];}

Answer 1

stores版本 2 中的变量将覆盖初始范围变量。正如在您的示例中所观察到的，"test3"并且"test4"未使用，因此将它们放在stores对象中毫无意义。

示例"T"中的大小写也与值的大小写不匹配<select>

也snippetMobile从未定义，我假设您指的Adress是显示选定的选项，因此我进行了这些更改。

var Store = document.getElementById("Store"),

  Adress = document.getElementById("Adress"),

  stores = {

    noSelection: "",

    test1: "Test1",

    test2: "Test2",

    test3: "Test3",

    test4: "Test4",

  }

Store.onchange = function() {

  Adress.innerHTML = stores[this.value];

}

var Gas = document.getElementById("Gas"),

  Number = document.getElementById("Number");

Gas.onchange = function() {

  Number.innerHTML = stores[this.value];

}

<select id="Store">

  <option value="noSelection">Snippet</option>

  <option value="test1">Test1</option>

  <option value="test2">Test2</option>

</select>

<span id="Adress"></span>

<select id="Gas">

  <option value="noSelection">Snippet</option>

  <option value="test1">Test1</option>

  <option value="test2">Test2</option>

</select>

<span id="Number"></span>