javascript - 如何有条件地将元素保持在一行中？

标签 javascript jquery html css

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

默认:

enter image description here

当我从品牌中选择“其他”时:

enter image description here

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

enter image description here

所以为了更好地解释它，我希望模型“-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>

最佳答案

它没有像其他下拉菜单那样被格式化，因为它当前位于 Model 的基于列的 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>

关于javascript - 如何有条件地将元素保持在一行中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55675308/

上一篇：html - CSS 网格中的缩进

下一篇：html - 是否可以使用纯 CSS 更改滚动上的此 div 颜色？

相关文章：

javascript - 从 Ajax 调用返回 php 错误

javascript - 将弱简单多边形拆分为真正的简单多边形或多边形

php - jQuery 对话框下拉

javascript - 尽管更新了 redux 状态，但组件不会重新渲染

javascript - 数据表删除导出到 pdf 和 excel 时的列

jquery - 在 click jquery 上 append 输入标签并将这些值发送到操作页面

html - 覆盖 css 播放按钮

html - 响应框居中对齐

javascript - 在 Angular 循环中运行下一个服务调用之前，如何等待对 Controller 的每个服务调用？

javascript - 幻灯片上的图像向下跳跃

©2024 IT工具网  联系我们