汽车品牌/车型动态下拉列表

时间：2019-03-29 17:20:35

标签： javascript jquery

我正在网站上建立一个新表单，并且使用了一些在这里找到的代码（Vehicle drop down selector）。但是，我在表单中使用此代码，一旦提交表单，make / model的值就不会更改为其各自的名称，而是显示其表单值。作为一个完整的JS新手，我该如何将提交的值从值更改为制造商/模型名称？

$(document).ready(function() {
  var $make = $('#make'),
    $model = $('#model'),
    $options = $model.find('option');

  $make.on('change', function() {
    $model.html($options.filter('[value="' + this.value + '"]'));
    $model.trigger('change');
  }).trigger('change');

  var $model = $('#model'),
    $year = $('#year'),
    $yearOptions = $year.find('option');

  $model.on('change', function() {
    $year.html($yearOptions.filter('[value="' + this.value + '"]'));
    $year.trigger('change');
  }).trigger('change');

  var $year = $('#year'),
    $identifier = $('#identifier'),
    $identifierOptions = $identifier.find('option');

  $year.on('change', function() {
    var filteredIdetifiers = $identifierOptions.filter('[value="' + this.value + '"]');
    debugger
    if (!($("#make").val() == 3 && $("#model option:selected").text() == 'Falcon')) {
      filteredIdetifiers = filteredIdetifiers.filter(function(i, e) {
        return e.value !== '3'
      });
    }
    $identifier.html(filteredIdetifiers);
    $identifier.trigger('change');
  }).trigger('change');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Vehicle Brand Selector List -->
<select name="make" id="make">
  <option value="0">Make</option>
  <option value="1">BMW</option>
  <option value="2">Daewoo</option>
  <option value="3">Ford</option>
  <option value="4">Holden</option>
  <option value="5">Honda</option>
  <option value="6">Hyundai</option>
  <option value="7">Isuzu</option>
  <option value="8">Kia</option>
  <option value="9">Lexus</option>
  <option value="10">Mazda</option>
  <option value="11">Mitsubishi</option>
  <option value="12">Nissan</option>
  <option value="13">Peugeot</option>
  <option value="14">Subaru</option>
  <option value="15">Suzuki</option>
  <option value="16">Toyota</option>
  <option value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
  <option value="0">Model</option>
  <option class="318i" value="1">318i</option>
  <option class="lanos" value="2">Lanos</option>
  <option class="courier" value="3">Courier</option>
  <option class="falcon" value="3">Falcon</option>
  <option class="festiva" value="3">Festiva</option>
  <option class="fiesta" value="3">Fiesta</option>
  <option class="focus" value="3">Focus</option>
  <option class="laser" value="3">Laser</option>
  <option class="ranger" value="3">Ranger</option>
  <option class="territory" value="3">Territory</option>
  <option class="astra" value="4">Astra</option>
  <option class="barina" value="4">Barina</option>
  <option class="captiva" value="4">Captiva</option>
  <option class="colorado" value="4">Colorado</option>
  <option class="commodore" value="4">Commodore</option>
  <option class="cruze" value="4">Cruze</option>
  <option class="rodeo" value="4">Rodeo</option>
  <option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
  <option value="0">Year</option>
  <option value="1">1998</option>
  <option value="1">1999</option>
  <option value="1">2000</option>
  <option value="1">2001</option>
  <option value="1">2002</option>
  <option value="1">2003</option>
  <option value="1">2004</option>
  <option value="1">2005</option>
  <option value="2">1997</option>
  <option value="2">1998</option>
  <option value="2">1999</option>
  <option value="2">2000</option>
  <option value="2">2001</option>
  <option value="2">2002</option>
  <option value="2">2003</option>
  <option value="3">1991-1999</option>
  <option value="4">1997-2007</option>
  <option value="5">1997-2007</option>
  <option value="3">2002</option>
  <option value="3">2003</option>
  <option value="3">2004</option>
  <option value="3">2005</option>
  <option value="4">1997-2005</option>
  <option value="4">1997-2005</option>
  <option value="4">1997-2005</option>
  <option value="4">1997-2005</option>
  <option value="4">1997-2005</option>
  <option value="4">1997-2005</option>
  <option value="4">1997-2005</option>
  <option value="4">1997-2005</option>
</select>
<!-- Vehicle Identity List -->
<select name="identifier" id="identifier">
  <option value="0">Type</option>
  <option class="E46" value="1">E46</option>
  <option class="1997-2003" value="2">N/A</option>
  <option class="1997-2007" value="4">N/A</option>
  <option class="1997-2007" value="5">N/A</option>
  <option class="5041618" value="3">BA</option>
  <option class="1997-2005" value="3">AU</option>
  <option class="1997-2005" value="3">AU2</option>
  <option class="1997-2005" value="4">N/A</option>
  <option class="1997-2005" value="4">1997-2005</option>
  <option class="1997-2005" value="4">1997-2005</option>
  <option class="1997-2005" value="4">1997-2005</option>
  <option class="1997-2005" value="4">1997-2005</option>
  <option class="1997-2005" value="4">1997-2005</option>
</select>

2 个答案:

答案 0 :(得分：0)

每个<option>标签中都有一个名为value的属性。当选择该选项时，此value属性作为下拉菜单的值返回。好像在您发现的代码中一样，它们都只是设置为数字。您可以将它们设置为任意值：

<option value="Ford">Ford</option>

<option class="focus" value="Focus">Focus</option>

修复动态选项

我看到修改值直接影响动态选项的显示方式。例如，汽车模型下拉列表的value属性用于通过仅显示具有相同值的选项来过滤汽车品牌下拉列表。无需使用模型下拉列表的value属性与make进行比较，我们可以添加一个名为data-make的新数据属性，然后根据该属性过滤模型下拉列表。这使您可以自由修改模型中的value属性。下面的示例代码显示了这一点。您需要修改JS，以使模型影响年份，年份也以相同的方式影响标识符。

$(document).ready(function() {
  var $make = $('#make'),
    $model = $('#model'),
    $options = $model.find('option');

  $make.on('change', function() {
    // We now filter model using the data-make attribute, not value
    $model.html($options.filter('[data-make="' + this.value + '"]'));
    $model.trigger('change');
  }).trigger('change');
  
  $('#carForm').submit(function(e) {
      e.preventDefault();
      let formData = $(this).serializeArray();
      let data = {};
      for (let i = 0; i < formData.length; i++) {
        data[formData[i].name] = formData[i].value;
      }
      
      alert('Make: ' + data.make + '\nModel: ' + data.model);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="carForm">
  <select name="make" id="make">
    <option value="0">Make</option>
    <option value="BMW">BMW</option> <!-- These values are now make names -->
    <option value="Daewoo">Daewoo</option>
    <option value="Ford">Ford</option>
  </select>
  <!-- Vehicle Model List -->
  <!-- Notice the new "data-make" attributes for each -->
  <select name="model" id="model">
    <option value="0">Model</option>
    <option class="318i" value="318i" data-make="BMW">318i</option>
    <option class="lanos" value="Lanos" data-make="Daewoo">Lanos</option>
    <option class="courier" value="Courier" data-make="Ford">Courier</option>
    <option class="falcon" value="Falcon" data-make="Ford">Falcon</option>
    <option class="festiva" value="Festiva" data-make="Ford">Festiva</option>
    <option class="fiesta" value="Fiesta" data-make="Ford">Fiesta</option>
    <option class="focus" value="Focus" data-make="Ford">Focus</option>
  </select>
  <button type="submit">Submit</button>
</form>

答案 1 :(得分：0)

您可以像这样获得所选的选项文本。

$('#form').submit(function(e) {
  e.preventDefault();
  var make = $make.find(':selected').text();
}

但是，将您期望返回的值设置为选项值并使用数据属性或类来处理过滤逻辑是一种很好的做法。

相关问题
最新问题