汽车制造/模型动态下拉列表

问题描述 投票：-1回答：2

我正在我的网站上设置一个新表单，我正在使用我在这里找到的一些代码（Vehicle drop down selector）。但是，我在表单中使用此代码，一旦提交表单，make / model的值不会更改为各自的名称，而是显示其表单值。作为一个完整的JS菜鸟，我将如何更改从值到make / model名称提交的值？

$(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>
javascript jquery
2个回答
0
投票

在每个<option>标签中都有一个名为value的属性。此值属性是选择该选项时作为下拉列表返回的值。似乎在您发现的代码中，它们都只是设置为数字。您可以将它们设置为您想要的任何内容：

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

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

固定动态选项

我看到修改值会直接影响动态选项的显示方式。例如，汽车模型下拉列表的值属性用于通过仅显示具有相同值的选项来过滤汽车生产下拉列表。我们可以添加一个名为data-make的新数据属性，并基于此过滤模型下拉列表，而不是使用模型下拉列表的值属性与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>
0
投票

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.