Создание аналогичного выпадающего списка делает вывод (внутренний HTML) неопределенным (jquery)

Question

Хейхей, я хочу 2 выпадающих с похожим содержанием. Версия 1 работает до тех пор, пока версия 2 не существует. Как только я включаю версию 2, только выходные данные версии 2 распознаются правильно, а выходные данные версии 1 отображаются как «неопределенные». Кто-нибудь может мне помочь?

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>

*script
var 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>

*script
var 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>