Question

如何使用jquery从下拉列表选择选项值？我正在将选择选项列表与bootstrap插件和select-search插件一起使用，但选择未激活。。 。

  $().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

如果要在创建选择器之后更改值，则必须刷新选择器。

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

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

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

如果您尝试更改不同选择上的多个值，则可以

多次调用selectpicker API（$('#numbers').selectpicker('val', 3);）
使用纯jquery更改所有值，然后刷新selectpicker

$（'＃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>

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

3 个答案: