Question

我创建了一个条件下拉列表，默认情况下，其值为“选择车辆品牌”和“选择车辆型号”。默认情况下，选择车辆模型处于禁用状态，因为我希望客户先选择品牌，以便我们可以加载相关模型。

还有一个名为“其他”的选项。这意味着如果品牌和型号未在列表中列出，请选择其他。另一个将带来两个输入文本字段，客户可以在其中自行编写品牌和型号。

问题1：现在要解决的问题是，如果我选择任何“ Make”，默认情况下，“ Model”字段应仅处于活动状态，并且工作正常，但问题在于模型下拉列表选择了“-其他-”，而不是“选择车辆型号”。

问题2：当我从“模型”下拉列表中选择“-其他-”时，如何用输入文本字段替换模型下拉列表。

期待解决方案。

var $make = $('#make'),
  $model = $('#model'),
  $options = $model.find('option');

$('#make').on('change', function() {
  if (this.value == '*') {
    removeClassDynamicClass();
    changeModelDiv();
    $("#others").addClass("hide");
    $("#others input").attr("disabled", "disabled");
    $(".model-div-not-others").removeClass("hide");
    $(".model-div-not-others select").removeAttr("disabled");
    $(".model-div-for-others").addClass("hide");
    $('#model').attr('disabled', 'disabled');
    $("#country-registeration").attr('disabled', 'disabled');
    $("#opt-details").attr('disabled', 'disabled');
  } else if (this.value == 'others') {

    if ($('.dynamic-class-4').hasClass('col-lg-4')) {
      $('.dynamic-class-4').removeClass('col-lg-4');
      $('.dynamic-class-4').addClass('col-lg-3');
    }
    changeModelDiv();
    $("#others").removeClass("hide");
    $("#others input").removeAttr("disabled");
    $(".model-div-not-others").addClass("hide");
    $(".model-div-for-others").removeClass("hide");
    $(".model-div-for-others input").removeAttr("disabled");
    $('#model').attr('disabled', 'disabled');
    $("#opt-details").removeAttr('disabled');
    // In-case of other countries added remove the below commented code
    //$("#country-registeration").removeAttr('disabled');

  } else {
    $model.html($options.filter('[value="' + this.value + '"]'));
    removeClassDynamicClass();
    changeModelDiv();
    $("#others").addClass("hide");
    $("#others input").attr("disabled", "disabled");
    $(".model-div-not-others").removeClass("hide");
    $(".model-div-not-others select").removeAttr("disabled");
    $(".model-div-for-others").addClass("hide");
    $('#model').removeAttr('disabled');
    $("#opt-details").removeAttr('disabled');
    // In-case of other countries added remove the below commented code
    //$("#country-registeration").removeAttr('disabled');
  }
});

function removeClassDynamicClass() {
  if ($('.dynamic-class-4').hasClass('col-lg-3')) {
    $('.dynamic-class-4').removeClass('col-lg-3');
    $('.dynamic-class-4').addClass('col-lg-4');
  }
}

function changeModelDiv() {
  if ($('#make').val() == 'others') {
    $('.model-div-not-others').addClass("hide");
    $('.model-div-for-others').removeClass("hide");
    $('#model-others').removeAttr("disabled");
    $('#model').attr('disabled', 'disabled');
  } else {
    if ($('.model-div-not-others').hasClass("hide")) {
      $('.model-div-not-others').removeClass("hide");
      $('.model-div-for-others').addClass("hide");
      $('#model').removeAttr("disabled");
      $('#model-others').attr('disabled', 'disabled');
    }
  }
}

$('#make').trigger('change');

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
  <label class="car-list-step-label">Make</label>
  <select class="form-control custom-select" name="make" id="make">
    <option disabled="disabled" selected="selected" value="*">Select vehicle make</option>
    <option value="1">Acura</option>
    <option value="2">Abarth</option>
    <option value="3">Alfa Romeo</option>
    <option value="4">Alpina</option>
    <option value="5">Aston Martin</option>
    <option value="others">Other</option>
  </select>
</div>
<!-- Make Others Details -->
<div id="others" class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3 hide">
  <label class="car-list-step-label">Make (others)</label>
  <input id="details" name="details" type="text" placeholder="Make" class="form-control car-list-input">
</div>

<!-- Vehicle Model -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 dynamic-class-4 float-left mb-3">
  <div class="model-div-not-others">
    <label class="car-list-step-label">Model</label>
    <select class="form-control custom-select" name="model" id="model">
      <option disabled="disabled" selected="selected">Select vehicle model</option>
      <!-- Acura -->
      <option value="1">1.6 EL</option>
      <option value="1">1.7 EL</option>
      <option value="1">2.3 CL</option>
      <option value="1">2.5 TL</option>
      <option value="1">3.0 CL</option>
      <option value="1">3.2 TL</option>
      <option value="1">3.5 RL</option>
      <option value="1">CL</option>
      <option value="1">CSX</option>
      <option value="1">EL</option>
      <option value="1">ILX</option>
      <option value="1">Integra</option>
      <option value="1">Legend</option>
      <option value="1">MDX</option>
      <option value="1">NSX</option>
      <option value="1">NSX-T</option>
      <option value="1">RDX</option>
      <option value="1">RL</option>
      <option value="1">RSX</option>
      <option value="1">SLX</option>
      <option value="1">TL</option>
      <option value="1">TSX</option>
      <option value="1">Vigor</option>
      <option value="1">ZDX</option>
      <option value="1">- Other -</option>
      <!-- Abarth -->
      <option value="2">124</option>
      <option value="2">500</option>
      <option value="2">500C</option>
      <option value="2">595</option>
      <option value="2">595C</option>
      <option value="2">695</option>
      <option value="2">Grande Punto</option>
      <option value="2">Punto Evo</option>
      <option value="2">Spider Cabrio</option>
      <option value="2">- Other -</option>
      <!-- Alfa Romeo -->
      <option value="3">145</option>
      <option value="3">146</option>
      <option value="3">147</option>
      <option value="3">155</option>
      <option value="3">156</option>
      <option value="3">159</option>
      <option value="3">164</option>
      <option value="3">166</option>
      <option value="3">33</option>
      <option value="3">4C</option>
      <option value="3">75</option>
      <option value="3">Alfetta</option>
      <option value="3">GT</option>
      <option value="3">GTV</option>
      <option value="3">GTV-6</option>
      <option value="3">GTV6</option>
      <option value="3">Giulia</option>
      <option value="3">Guiletta</option>
      <option value="3">Milano</option>
      <option value="3">Mito</option>
      <option value="3">Spider</option>
      <option value="3">- Other -</option>
      <!-- Alpina -->
      <option value="4">B4</option>
      <option value="4">B5</option>
      <option value="4">- Other -</option>
      <!-- Aston Martin -->
      <option value="5">Cygnet</option>
      <option value="5">DB7</option>
      <option value="5">DB9</option>
      <option value="5">Rapide S</option>
      <option value="5">Vanquish S</option>
      <option value="5">Vantage</option>
      <option value="5">- Other -</option>
    </select>
  </div>
  <!-- Vehicle Model Others -->
  <div class="model-div-for-others hide">
    <label class="car-list-step-label">Model (others)</label>
    <input disabled id="model-others" name="models" type="text" placeholder="Model" class="form-control car-list-input">
  </div>
</div>

Answer 1

要解决问题1，一个选项是在运行过滤器之前将值预先分配给“ -Select Vehicle Model”选项，然后将其设置为“ selected”选项。

// pre-assign a value to the first option - "Select Vehicle Model" 
$("#model option:eq(0)").val(this.value);

// run the filter, which will now include the first option
$model.html($options.filter('[value="' + this.value + '"]'));

// make the first option the selected option
$("#model option:eq(0)").prop("selected",true);

我在CodePen上的解决方案：https://codepen.io/onegrumpybunny/full/NmjzXb

对于问题2，您可以隐藏包含“模型”选择的div，并显示包含“其他”文本字段的div。

$('#model').on('change', function() {
   if ($('#model :selected').text() == '- Other -') {

     // uncomment this to hide the "model" select when "other" option is selected
     //$('.model-div-not-others').addClass("hide"); 

     $('.model-div-for-others').removeClass("hide");
     $('#model-others').removeAttr("disabled");
   } else {
     $('.model-div-for-others').addClass("hide");
     $('#model-others').attr("disabled","disabled");
   }
});

尽管如此，使用选项文本并不是最佳实践。我建议为每个选项分配一个有效值。然后，为每个选项添加一个数据属性值并对其进行过滤（我相信其他人也提到了这一点）。这将为您提供来自表单的有效值。

---编辑--- 这是您的应用示例，其中为每个选项分配了有效值，并对数据属性值进行了过滤：https://codepen.io/onegrumpybunny/full/wZevjy

如何解决条件下拉问题

1 个答案: