如何使用 jquery 设置选择选项值并选择搜索库？

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);

Read More

Answer 2

如果要在创建 selectpicker 后更改值，则必须刷新 selectpicker。

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

但是在页面加载时，你只需要改变你的 jquery 的顺序。

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

如果你想改变不同选择的多个值，你可以

1. 多次调用 selectpicker API ($('#numbers').selectpicker('val', 3);)

2. 使用纯 jquery 更改所有值，然后刷新选择器

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

这里是来源https://stackoverflow.com/a/14804479

Answer 3

您的代码中没有 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>