Как установить значение параметра выбора с помощью jquery и выберите поиск lib?

Question

как выбрать форму значения параметра в раскрывающемся списке выбора с помощью jquery? Я использую список опций выбора с плагином начальной загрузки и плагином выбора-поиска, но выбор не активирован. , .

  $().ready(function(){
      // To style only selects with the selectpicker class
      $('select').selectpicker();
      $('#numbers').val(3);
  });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!--***************select search plugin********-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script>
<select name="numbers" id="numbers">
<option>Why Not appears?</option>
	<option value="1">one</option>
	<option value="2">two</option>
	<option value="3">three</option>
	<option value="4">four</option>
</select>

Я бы хотел, чтобы

Answer 1

Ваш код работает нормально, но вы переопределяете его при инициализации средства выбора.Вместо этого установите значение и затем инициализируйте сборщик ИЛИ используйте API выбора для этого:

  $(document).ready(function(){
      $('select').selectpicker();
      $('#numbers').selectpicker('val', 3);
  });

  $(document).ready(function(){
      $('select').selectpicker();
      $('#numbers').selectpicker('val', 3);
  });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!--***************select search plugin********-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script>
<select name="numbers" id="numbers">
<option>Why Not appears?</option>
	<option value="1">one</option>
	<option value="2">two</option>
	<option value="3">three</option>
	<option value="4">four</option>
</select>

Это происходит из-за того, что интерфейс этого компонента изменяется, когда вы инициализируете его для средства выбора.Если вы хотите использовать selectpicker API, вам нужно использовать .selectpicker('val', 3);

Подробнее

Answer 2

В вашем коде нет функции selectpicker (), поэтому jquery больше не выполняется. Я прокомментировал это и он работает нормально.

$().ready(function(){
      // To style only selects with the selectpicker class
      //$('select').selectpicker();
      $('#numbers').val(3);
  });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!--***************select search plugin********-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script>
<select name="numbers" id="numbers">
<option>Why Not appears?</option>
	<option value="1">one</option>
	<option value="2">two</option>
	<option value="3">three</option>
	<option value="4">four</option>
</select>

Answer 3

Вы должны обновить селектор выбора, если хотите изменить значение после того, как вы создали селектор выбора.

$('#numbers').selectpicker('val', 3);

Но при загрузке страницы вам нужно только изменить порядок ваших jquery.

$('#numbers').val(3);
$('select').selectpicker();

Если вы пытаетесь изменить несколько значений на разных выборках, вы можете

1. несколько раз вызывать API выбора выбора ($('#numbers').selectpicker('val', 3);)

2. изменить все значения с помощью чистого jquery и затем обновить селектор выбора

   $ ('# first'). Val (3);
   $ ('# second'). Val(4);$ ('select'). selectpicker ('refresh');

Вот источник https://stackoverflow.com/a/14804479