如何有条件地将元素保存在一行中？

Question

我创建了一行并且在该行内部，我有3个元素，但是当我从make下拉选择“Other”时，这3个元素变为4，并且它工作得非常好。但是当我从Model下拉列表中选择“-Other-”时，我注意到模型“Other”输入字段不是该行的一部分而且它不起作用。我附上以下示例以进一步理解：

默认：

当我从make中选择“other”时：

当我从模型中选择“-other”时：

因此，为了更好地解释它，我希望模型“ - 其他”就像制作其他元素，即一行中的所有元素。

有人可以帮忙吗？

注意：我使用jQuery动态类实现了Make“other”。

问候，比尔

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 {
    var thisOption = $("#make :selected").data("option");
    $model.html($options.filter('[data-option="' + thisOption + '"], [value="0"]'));
    $("#model option:eq(0)").prop("selected", true);
    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');
    }
  }
}

$('#model').on('change', function() {
  if ($('#model :selected').val() == '- Other -') {
    //$('.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");
  }
});

$('#make').trigger('change');

.hide {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet">


<div class="row">
  <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 data-option="1">Acura</option>
      <option data-option="2">Abarth</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 value="0" disabled="disabled" selected="selected">Select vehicle model</option>
        <!-- Acura -->
        <option data-option="1">1.6 EL</option>
        <option data-option="1">1.7 EL</option>
        <option data-option="1">2.3 CL</option>
        <option data-option="1">2.5 TL</option>
        <option data-option="1">3.0 CL</option>
        <option data-option="1">3.2 TL</option>
        <option data-option="1">3.5 RL</option>
        <option data-option="1">CL</option>
        <option data-option="1">CSX</option>
        <option data-option="1">EL</option>
        <option data-option="1">ILX</option>
        <option data-option="1">Integra</option>
        <option data-option="1">Legend</option>
        <option data-option="1">MDX</option>
        <option data-option="1">NSX</option>
        <option data-option="1">NSX-T</option>
        <option data-option="1">RDX</option>
        <option data-option="1">RL</option>
        <option data-option="1">RSX</option>
        <option data-option="1">SLX</option>
        <option data-option="1">TL</option>
        <option data-option="1">TSX</option>
        <option data-option="1">Vigor</option>
        <option data-option="1">ZDX</option>
        <option data-option="1">- Other -</option>
        <!-- Abarth -->
        <option data-option="2">124</option>
        <option data-option="2">500</option>
        <option data-option="2">500C</option>
        <option data-option="2">595</option>
        <option data-option="2">595C</option>
        <option data-option="2">695</option>
        <option data-option="2">Grande Punto</option>
        <option data-option="2">Punto Evo</option>
        <option data-option="2">Spider Cabrio</option>
        <option data-option="2">- Other -</option>
      </select>
    </div>
  </div>
 <!-- Vehicle Model Others -->
<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-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>
  <!-- Vehicle Optional Details -->
  <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">Details (optional)</label>
    <input id="opt-details" name="opt-details" type="text" placeholder="Additional details" class="form-control car-list-input">
  </div>
</div>

Answer 1

它没有像其他下拉列表那样被格式化，因为它目前在Model的基于col的div中。您应该将Model (others)元素放入其自己的基于col的div中，就像其他下拉列表一样：

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