Получение целевого значения из формы, хранящейся как JS переменная

Question

Я пытаюсь позволить пользователю выбрать значение из выпадающего селектора, который, в свою очередь, условно загрузит второй выпадающий селектор. Как только оба поля будут иметь значение, появится ссылка, которая была динамически сгенерирована из этих двух значений.

Например: Пользователь выбирает «audi» из первой формы, которая показывает форму audi, затем выбирает «r8 "из второй формы, которая создаст www.example.com/** audi ** / ** r8 ** /

Однако, похоже, я не могу получить event.target .значение второго раскрывающегося списка; Я предполагаю, потому что, когда скрипт загружает, значения там нет.

Как мне go написать это, чтобы я мог получить оба значения, а затем вставить их в ссылку?

    <form>
    <select name="cars" id="cars">
    <option value="" disabled selected>Select your Car</option>
      <option value="audi">Audi</option>
      <option value="volkswagen">Volkswagen</option>
    </select>
  </form>
<br><br>

<div class="model-field" id="model-field"></div>

<div class="button-field">
  <h4>link:</h4>
  <p id="button-field"></p>
</div>

  <script>

    var audiForm = '<form class="audi-model">' + 
          '<select name="audi-model" id="audi-model">' +
          '<option value="" disabled selected>Select Audi model</option>' +
            '<option value="a4">A4</option>' +
            '<option value="a5">A5</option>' +
            '<option value="r8">r8</option>' +
          '</select>' +
        '</form>';

    var vwForm = '<form class="vw-model">'  +
    '<select name="vw-model" id="vw-model">' +
    '<option value="" disabled selected>Select VW model</option>' +
      '<option value="jetta">Jetta</option>' +
      '<option value="passat">Passat</option>' +
    '</select>' +
  '</form>';

    var carsForm = document.getElementById("cars");
    if (carsForm) carsForm.addEventListener('change', function(event) {
      var carType = (event.target.value);
      console.log(carType);
        if(event.target.value == 'audi') {
          document.getElementById("model-field").innerHTML = audiForm;
        }
        if(event.target.value == 'volkswagen') {
          document.getElementById("model-field").innerHTML = vwForm;
        }
    });
    
    var audiModelForm = document.getElementById("audi-model");
    if (audiModelForm) audiModelForm.addEventListener('change', function(event) {
      var audiModel = event.target.value;
      console.log(audiModel); // Doesn't work as the above line is likely null
      var link = '<h4>' + carType + '/' + audiModel + '</h4>';
      console.log(link);
      document.getElementById("button-field").innerHTML = link;
    });


    var vwModelForm = document.getElementById("vw-model");
    if (vwModelForm) vwModelForm.addEventListener('change', function(event) {
      var vwModel = event.target.value;
      console.log(vwModel);  // Doesn't work as the above line is likely null
      var link = '<h4>' + carType + '/' + vwModel + '</h4>';
      console.log(link);
      document.getElementById("button-field").innerHTML = link;
    });
    
    </script>

Answer 1

Другое решение - сохранить параметры в объекте javascript и просто автоматически заполнить выделение по мере необходимости. Это позволит вам легко обновить систему, чтобы принять больше марок и моделей.

var data = {
"audi": ["a4","a5","r8"],
"volkswagen": ["Bug","Jetta","Golf"]
};

var make = document.querySelector("#cars");
var model = document.querySelector("#model");
var link = document.querySelector("#link");
make.addEventListener("change",function(){
if(make.value != ""){
  var models = data[make.value];
  var length = model.options.length;
  for (i = length-1; i >= 0; i--) {model.options[i] = null;}
  link.innerHTML = "";
  
  let opt= document.createElement("option");
   opt.text = "Select " + make.value + " Model";
   opt.value = "";
  model.appendChild(opt);
  
  models.forEach(function(k,v){
   let opt= document.createElement("option");
   opt.text = k;
   opt.value = k;
    model.appendChild(opt);
  });
  }
});

model.addEventListener("change",function(){
  if(model.value != ""){
     link.innerHTML = '<h4>' + make.value + '/' + model.value + '</h4>';
  }
});

<form>
  <select name="cars" id="cars">
    <option value="" disabled selected>Select your Car</option>
      <option value="audi">Audi</option>
      <option value="volkswagen">Volkswagen</option>
  </select>
  <select name="model" id="model"></select>
</form>
<div id="link">

</div>

Answer 2

Проблема в том, что ваш код пытается найти и настроить обработчик событий для второго раскрывающегося списка до его создания. Перемещение этого кода внутрь первого обработчика событий заставляет его работать.

<form>
  <select name="cars" id="cars">
    <option value="" disabled selected>Select your Car</option>
      <option value="audi">Audi</option>
      <option value="volkswagen">Volkswagen</option>
  </select>
</form>
<br><br>

<div class="model-field" id="model-field"></div>

<div class="button-field">
  <h1>link:</h1>
  <p id="button-field"></p>
</div>

  <script>

    var audiForm = '<select name="audi-model" id="audi-model">' +
          '<option value="" disabled selected>Select Audi model</option>' +
            '<option value="a4">A4</option>' +
            '<option value="a5">A5</option>' +
            '<option value="r8">r8</option>' +
          '</select>' +
        '</form>';

    var vwForm = '<select name="vw-model" id="vw-model">' +
    '<option value="" disabled selected>Select VW model</option>' +
      '<option value="jetta">Jetta</option>' +
      '<option value="passat">Passat</option>' +
    '</select>' +
  '</form>';

    var carsForm = document.getElementById("cars");
    if (carsForm) carsForm.addEventListener('change', function(event) {
      var carType = (event.target.value);
      console.log(carType);
        if(event.target.value == 'audi') {
          document.getElementById("model-field").innerHTML = audiForm;
        }
        if(event.target.value == 'volkswagen') {
          document.getElementById("model-field").innerHTML = vwForm;
        }
        
        var audiModelForm = document.getElementById("audi-model");
        if (audiModelForm) {
          audiModelForm.addEventListener('change', function(event) {
            var audiModel = event.target.value;
            console.log(audiModel);
            var link = '<h4>' + carType + '/' + audiModel + '</h4>';
            console.log(link);
            document.getElementById("button-field").innerHTML = link;
         });
         }
    });
   

    var vwModelForm = document.getElementById("vw-model");
    if (vwModelForm) vwModelForm.addEventListener('change', function(event) {
      var vwModel = event.target.value;
      console.log(vwModel);  // Doesn't work as the above line is likely null
      var link = '<h4>' + carType + '/' + vwModel + '</h4>';
      console.log(link);
      document.getElementById("button-field").innerHTML = link;
    });
    
    </script>

Но на самом деле, лучшее решение - иметь select уже статически построенным с самого начала, но просто скрытым. Затем вы можете сразу настроить его обработчик, но заполнять его элементы option только после того, как будет сделан первый выбор. Вам также понадобится только один вторичный select для любого набора option элементов, релевантных на основе первого выбора.

Кроме того, вы не должны создавать form элементы, которые обертывают каждый select. Если вы собираетесь куда-то отправлять эти данные, вам просто понадобится один form вокруг всех элементов формы. А если нет, вам вообще не нужен form.

Наконец, не используйте элементы заголовка HTML из-за размера, который они составляют для вашего текста. Вы не можете иметь h4, если у вас уже нет h3. Используйте CSS для стилизации текста.

var audi = '<option value="" disabled selected>Select Audi model</option>' +
            '<option value="a4">A4</option>' +
            '<option value="a5">A5</option>' +
            '<option value="r8">r8</option>';

var vw = '<option value="" disabled selected>Select VW model</option>' +
      '<option value="jetta">Jetta</option>' +
      '<option value="passat">Passat</option>';

var cars = document.getElementById("cars");
var models = document.getElementById("models");

cars.addEventListener('change', function(event) {
  if(event.target.value == 'audi') {
    models.innerHTML = audi;
  } else if(event.target.value == 'volkswagen') {
   models.innerHTML = vw;
  }
  models.classList.remove("hidden"); // Time to show the second list
});
   
models.addEventListener('change', function(event) {
  var link = '<h1>' + cars.value + '/' + models.value + '</h1>';
  console.log(link);
  document.getElementById("button-field").innerHTML = link;
});

.hidden { display:none; }
h1 { font-size:.8em;}

<form>
  <select name="cars" id="cars">
    <option value="" disabled selected>Select your Car</option>
      <option value="audi">Audi</option>
      <option value="volkswagen">Volkswagen</option>
  </select>

  <div class="model-field" id="model-field">
    <select name="models" id="models" class="hidden"></select>
  </div>
</form>

<div class="button-field">
  <h1>link:</h1>
  <p id="button-field"></p>
</div>