Блог

Главная - Вопросы по программированию - Как сохранить элементы в одной строке условно?

Как сохранить элементы в одной строке условно?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я создал строку, и внутри этой строки у меня есть 3 элемента, но эти 3 элемента меняются на 4, когда я выбираю «Другое» из выпадающего списка make, и это работает абсолютно нормально. Но когда я выбираю «-Other-» из выпадающего списка модели, я замечаю, что поле ввода модели «Other» не остается частью строки, и оно не работает. Я прилагаю следующие примеры для дальнейшего понимания:

По умолчанию:

введите описание изображения здесь

Когда я выбираю «другое» из make:

введите описание изображения здесь

Когда я выбираю «-other» из модели:

введите описание изображения здесь

Итак, чтобы объяснить это лучше, я хочу, чтобы модель «-other» была такой же, как make other, т.е. Все элементы в одной строке.

Кто-нибудь может помочь, пожалуйста?

Примечание: я добился создания «другого» с помощью динамического класса jQuery.

С уважением, Билл

 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>

Ответ №1:

Он не форматируется, как другие выпадающие списки, потому что в настоящее время он находится Model в div на основе col. Вы должны поместить свой Model (others) элемент в свой собственный div на основе col, как и остальные выпадающие списки, например:

 <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>
Метки: