如何解决条件下拉问题答案

【问题标题】：How do I fix the conditional dropdown issue如何解决条件下拉问题
【发布时间】：2019-04-11 12:54:44
【问题描述】：

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

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

问题 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>

【问题讨论】：

第二个select 的所有选项都具有相同的值。你怎么知道哪一个被选中了？将<option value= 更改为<option data-make= 并匹配[data-make=。 2. 不要“替换”select - 隐藏它并显示以前隐藏的输入 $(".model-div-for-others").show()
对于问题 #1，一旦
对于问题 #2，您可以隐藏包含
@CherylVelez 我试过了。没能成功。请问有预告吗？
@BillNathan 我发布了一个带有 CodePen 链接的解决方案。

标签： javascript jquery html twitter-bootstrap

【解决方案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

【讨论】：

在模型下拉列表中，如果您注意到还有一个名为“-其他-”的选项，这表示如果模型不可用，我们会将下拉列表切换到输入文本字段，您可以编写模型由你的手。就像在“make”下一样，还有另一个选项。这意味着如果您在列表中找不到品牌，请使用输入字段手动添加品牌和型号。
@BillNathan 啊，明白了。我已经相应地更新了我的答案和 CodePen。
@BillNathan 我添加了一个链接到另一个示例，该示例在过滤器中使用选项的数据属性而不是选项的值。这可能会从您的表单中产生更有用的结果。
如果您注意到这里，当我从模型下拉列表中选择 - 其他 - 选项时。您将模型下拉菜单切换为输入文本字段。现在除了刷新，我别无选择可以回到以前的模型。因此，我希望在模型下拉列表旁边添加 - other - 输入字段，而不是通过替换它。
@BillNathan 我已在我的答案中添加到代码 sn-p 中。如果模型选择更改为“-其他-”之外的其他内容，则隐藏“模型（其他）”框。