Question

我已经创建了一行，并且在该行内，我有3个元素，但是当我从make下拉列表中选择“ Other”时，这3个元素变为4。但是，当我从“模型”下拉列表中选择“ -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>

如何将元素连续地保持在一行中？

1 个答案: