web-dev-qa-db-ja.com

bootstrap-select項目の追加と選択

Silvio MoretoのBootstrap Selectを使用しています。

私のページには、selectpickerに項目を追加できる入力ボックス付きのモーダルを開くボタンがあります。そのアイテムを自動的に選択したいのですが、機能させることができません。

私が持っているコードは次のとおりです：

$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');
$('#myselect').val(newitemnum);
$('#myselect').selectpicker('refresh');

しかし、それはうまくいきません。アイテムは選択されません。

選択行を次のように置き換えようとしました：

$('#myselect').selectpicker('val',newitemnum);

しかし、それも機能しません

アイデアは大歓迎です（ただし、アイテムはselectpickerに追加されます）。

javascriptjquerytwitter-bootstrapbootstrap-select
14
Chris Jones

タイプミスがあります。の代わりに：

$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');

必要なもの：

$('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');

JSFiddleデモは次のとおりです。 http://jsfiddle.net/xbr5agqt/

「「醤油」オプションを追加して選択」ボタンは次のことを行います。

$("#myselect").append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
$("#myselect").val(4);
$("#myselect").selectpicker("refresh");

もう少し高速なアプローチ（「追加して選択する 'Relish'オプション」ボタンで使用）は、既に適用されているselected属性を持つ新しい<option>要素を追加することです。

$("#myselect").append('<option value="'+newitemnum+'" selected="">'+newitemdesc+'</option>');
$("#myselect").selectpicker("refresh");
40
Daniel Trebbien

optionsを動的に_bootstrap-selectpicker_、append the optionにselectおよびrefresh the selectpickerに追加する場合

_$(document).on('click','#addOptions',function(){
  var newitemnum = Math.floor(Math.random() * 100) + 1;
  var newitemdesc = "Item "+ newitemnum;
  
  // Append the option to select
  $('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
  
  // Set the select value with new option
  $("#myselect").val(newitemnum);
  
  // Refresh the selectpicker
  $("#myselect").selectpicker("refresh");
});_
_<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<select name="myselect[]" class="selectpicker" id="myselect">
  <option value="A1">Anatomy</option>
  <option value="A2">Anesthesia</option>
  <option value="A3">Biochemistry</option>
  <option value="A4">Community Medicine</option>
  <option value="A5">Dermatology</option>
  <option value="A6">ENT</option>
</select>

<button id="addOptions" class="btn btn-success">Add</button>_

より良い方法として、追加オプションにselected属性を追加します

_// Append the option to select
$('#myselect').append('<option value="'+newitemnum+'" selected>'+newitemdesc+'</option>');
_
0
Nishal K.R