Как получить URL из выпадающего списка выберите с помощью javascript

Question

Я новичок в мире Javascript и пытаюсь получить URL из моих раскрывающихся списков. Я создал это:

$(document).ready(function() {
  $('select').on('change', function() {
    var target = $(this).find(":selected").attr("data-target");
    var id = $(this).attr("id");
    $("div[id^='" + id + "']").hide();
    $("#" + id + "-" + target).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="service" id="service" class="service">
  <option>Select a Service</option>
  <option value="screen" data-target="devices" id="screen">Screen Replacement</option>

  <a href="#" data-acyear="2019/2020" class="acYearChooser active">2019/2020</a>
  <option value="comp" data-target="comp" id="comp">Computer Work</option>
  <option value="misc" data-target="misc" id="misc">Miscellaneous</option>
</select>
<div style="display:none" id="service-devices">
  <select name="devices" id="devices" class="devices">
    <option>Select a device</option>
    <option value="iphone" data-target="iphones" id="iphone">iPhone</option>
    <option value="ipad" data-target="ipads" id="ipad">iPad</option>
    <option value="android" id="android">Android</option>
  </select>
  <div style="display:none" id="devices-iphones">
    <select name="iphone" id="iphone" class="iphone">
      <option></option>
      <option value="iphone6" id="iphone6">iPhone 6</option>
      <option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
      <option value="iphone5s" id="iphone5s">iPhone 5S</option>
      <option value="iphone5c" id="iphone5c">iPhone 5C</option>
      <option value="iphone5" id="iphone5">iPhone 5</option>
      <option value="iphone4s" id="iphone4s">iPhone 4S</option>
      <option value="iphone4" id="iphone4">iPhone 4</option>
    </select>
  </div>
  <div style="display:none" id="devices-ipads">
    <select name="ipad" id="ipad" class="ipad">
      <option></option>
      <option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
      <option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
      <option value="ipadair" id="ipadair">iPad Air</option>
      <option value="ipad4" id="ipad4">iPad 4</option>
      <option value="ipad3" id="ipad3">iPad 3</option>
      <option value="ipadmini" id="ipadmini">iPad Mini</option>
      <option value="ipad2" id="ipad2">iPad 2</option>
    </select>
  </div>
</div>

Я пытаюсь получить URL-адрес из каждого раскрывающегося списка, чтобы я мог отправить этот URL-адрес, например,

service=screen_replacment&device=iphone&model=iphone6

Может кто-нибудь помочь с этим? Извините, если это новенький ie вопрос

Answer 1

Используйте несколько простых условий, получите значение предыдущих выборов и отформатируйте строку:

$(document).ready(function() {
  $('select').on('change', function() {
    var target = $(this).find(":selected").attr("data-target");
    var id = $(this).attr("id");

    var service = '';
    var device = '';
    var model = '';

    if (id === 'service') {
      service = $(this).val();
    } else if (id === 'devices') {
      service = $('#service').val();
      device = $(this).val();
    } else if (id === 'iphone' || id === 'ipad') {
      service = $('#service').val();
      device = $('#devices').val();
      model = $(this).val();
    }
    console.log(`service=${service}&device=${device}&model=${model}`);

    $("div[id^='" + id + "']").hide();
    $("#" + id + "-" + target).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="service" id="service" class="service">
  <option>Select a Service</option>
  <option value="screen" data-target="devices" id="screen">Screen Replacement</option>

  <a href="#" data-acyear="2019/2020" class="acYearChooser active">2019/2020</a>
  <option value="comp" data-target="comp" id="comp">Computer Work</option>
  <option value="misc" data-target="misc" id="misc">Miscellaneous</option>
</select>
<div style="display:none" id="service-devices">
  <select name="devices" id="devices" class="devices">
    <option>Select a device</option>
    <option value="iphone" data-target="iphones" id="iphone">iPhone</option>
    <option value="ipad" data-target="ipads" id="ipad">iPad</option>
    <option value="android" id="android">Android</option>
  </select>
  <div style="display:none" id="devices-iphones">
    <select name="iphone" id="iphone" class="iphone">
      <option></option>
      <option value="iphone6" id="iphone6">iPhone 6</option>
      <option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
      <option value="iphone5s" id="iphone5s">iPhone 5S</option>
      <option value="iphone5c" id="iphone5c">iPhone 5C</option>
      <option value="iphone5" id="iphone5">iPhone 5</option>
      <option value="iphone4s" id="iphone4s">iPhone 4S</option>
      <option value="iphone4" id="iphone4">iPhone 4</option>
    </select>
  </div>
  <div style="display:none" id="devices-ipads">
    <select name="ipad" id="ipad" class="ipad">
      <option></option>
      <option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
      <option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
      <option value="ipadair" id="ipadair">iPad Air</option>
      <option value="ipad4" id="ipad4">iPad 4</option>
      <option value="ipad3" id="ipad3">iPad 3</option>
      <option value="ipadmini" id="ipadmini">iPad Mini</option>
      <option value="ipad2" id="ipad2">iPad 2</option>
    </select>

Я использовал литералы шаблона для входа в консоль.