0

入力で複数選択を行うために、JQuery Bootstrap Multiselect プラグインを使用しています。「オプションを表示」ボタンをクリックしたときに複数選択機能でデフォルト値 2,3 (ピーター、ジェーン) を設定したい場合、入力フィールドに値が表示されないという問題に直面しています。 .

以下は、期待される結果が欲しいです：

ここに画像の説明を入力

以下は、私が試したコーディングです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />


<select id="ahli_ahli" class="selectpicker" multiple data-live-search="true">
  <option value="1">John</option>
  <option value="2">Peter</option>
  <option value="3">Jane</option>
</select><br><br><br>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="show()">Show Option</button>
<script>
$(document).ready(function(){
     $('#ahli_ahli').multiselect({
      nonSelectedText: 'Pilih ahli-ahli',
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      buttonWidth:'100%'
     });
    });

function show(){
    var data="2,3";
  var dataarray=data.split(",");
  $("#ahli_ahli").val(dataarray);
 // console.log(dataarray);
}
</script>

この方法の下で使用しましたが、機能しません。

function show(){
    var data="2,3";
  var dataarray=data.split(",");
  $("#ahli_ahli").val(dataarray);
}

誰かがそれを解決する方法を教えてくれることを願っています。ありがとう。

4

1 に答える 1

0

選択した属性を特定のオプション フィールドに追加するだけです。複数選択を更新します

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />


<select id="ahli_ahli" class="selectpicker" multiple data-live-search="true">
  <option value="1">John</option>
  <option value="2">Peter</option>
  <option value="3">Jane</option>
</select><br><br><br>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="show()">Show Option</button>
<script>
$(document).ready(function(){
     $('#ahli_ahli').multiselect({
      nonSelectedText: 'Pilih ahli-ahli',
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      buttonWidth:'100%'
     });
    });

function show(){ 
  var selValues = $('#ahli_ahli').val(); 
  selValues.push("2")
  selValues.push("3"); 
  $("#ahli_ahli").multiselect("select",selValues);
     
}
</script>

于 2021-04-19T07:48:21.973 に答える