如何使用javascript从下拉选择中获取url

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>

我想要实现的是从每个下拉列表中获取 URL，以便我可以发送该 URL，输出如下

service=screen_replacment&device=iphone&model=iphone6

有人可以帮忙吗？抱歉，如果这是一个新手问题

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>