JQuery переключение div с полем <select> - PullRequest
Новая
       5

JQuery переключение div с полем <select>

0 голосов
/ 18 января 2019

Я около часа пытался заставить этот код работать, но это просто боль в темном месте.

Хорошо, давайте перейдем к преследованию.Я пытаюсь создать поле выбора, которое переключает различные элементы HTML в зависимости от состояния <select>

$(document).ready(function() {
  $('#mySelect').change(function() {
    let item1 = $("#item1");
    let item2 = $("#item2");
    let item3 = $("#item3");

    switch ($('select[name=mySelect]').val()) {
      case 1:
        item1.show();
        item2.hide();
        item3.hide();
        break;
      case 2:
        item1.hide();
        item2.show();
        item3.hide();
        break;
      case 3:
        item1.hide();
        item2.hide();
        item3.show();
        break;
      default:
        item1.hide();
        item2.hide();
        item3.hide();
        break;
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" name="mySelect">
  <option value="0" disabled selected>-- Select your item--</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
</select>

<div id='item1'>
  <p> contents
</div>

<div id='item2'>
  <p> text2</p>
</div>

<div id='item3'>
  <p> text3</p>
</div>

1 Ответ

0 голосов
/ 18 января 2019

Проблема с вашей текущей логикой заключается в том, что вы извлекаете строку из val() и сравниваете ее с int в switch, следовательно, блок default всегда выполняется, поскольку сравнение не удается. Чтобы исправить это, сравните со строкой или конвертируйте val() в int. 

$(document).ready(function() {
  $('#mySelect').change(function() {
    let item1 = $("#item1");
    let item2 = $("#item2");
    let item3 = $("#item3");

    switch ($('select[name=mySelect]').val()) {
      case '1':
        item1.show();
        item2.hide();
        item3.hide();
        break;
      case '2':
        item1.hide();
        item2.show();
        item3.hide();
        break;
      case '3':
        item1.hide();
        item2.hide();
        item3.show();
        break;
      default:
        item1.hide();
        item2.hide();
        item3.hide();
        break;
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" name="mySelect">
  <option value="0" disabled selected>-- Select your item--</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
</select>

<div id='item1'>
  <p> contents
</div>

<div id='item2'>
  <p> text2</p>
</div>

<div id='item3'>
  <p> text3</p>
</div>

Однако, , вы можете достичь своей цели гораздо более скромным образом, назначив общий класс для всех элементов div, чтобы вы могли легко скрыть их все при изменении выделения. Затем вы можете построить строку селектора идентификатора, объединяя выбранное значение, например так: 

$(document).ready(function() {
  $('#mySelect').change(function() {
    $('.item').hide();
    $('#item' + $(this).val()).show();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" name="mySelect">
  <option value="0" disabled selected>-- Select your item--</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
</select>

<div class="item" id="item1">
  <p>contents</p>
</div>

<div class="item" id="item2">
  <p>text2</p>
</div>

<div class="item" id="item3">
  <p>text3</p>
</div>

Обратите внимание, что вы не сможете выбрать отключенный элемент option, поэтому нет необходимости снова показывать все элементы .item, пока ваш блок default пытается это сделать.

...