jquery - ブートストラップからselectpickerプラグインを使用して選択時に選択値を設定する方法

Question

私は次のようなBootstrap-Selectプラグインを使用しています：

HTML：

<select name="selValue" class="selectpicker">
   <option value="1">Val 1</option>
   <option value="2">Val 2</option>
   <option value="3">Val 3</option>
   <option value="4">Val 4</option>
</select>

Javascript：

$('select[name=selValue]').selectpicker();

ここで、ボタンがクリックされたときに選択された値をこの選択に設定したいと思います...次のようになります。

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
});

しかし、何も起こりません。

どうすればこれを達成できますか？

score 172 · Accepted Answer

値は正しく選択されていますが、プラグインが実際の選択を非表示にし、順序付けられていないリストを含むボタンを表示するため、表示されませんでした。したがって、ユーザーに選択で選択された値を表示させたい場合は、次のようにすることができます。：

//Get the text using the value of select
var text = $("select[name=selValue] option[value='1']").text();
//We need to show the text inside the span that the plugin show
$('.bootstrap-select .filter-option').text(text);
//Check the selected attribute for the real select
$('select[name=selValue]').val(1);

編集：

@blushrtが指摘しているように、より良い解決策は次のとおりです。

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh')

編集2：

複数の値を選択するには、値を配列として渡します。

score 82 · Accepted Answer

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh');

これがあなたがする必要があるすべてです。selectpickerの生成されたhtmlを直接変更する必要はありません。非表示の選択フィールドを変更してから、selectpicker（'refresh'）を呼び出すだけです。

score 48 · Accepted Answer

48

$('.selectpicker').selectpicker('val', YOUR_VALUE);

于 2015-10-12T22:35:17.800 に答える

score 17 · Accepted Answer

「val」パラメータを使用して値を設定する場合は、更新は必要ありません。fiddleを参照してください。値に角かっこを使用して、選択した複数の値を有効にします。

$('.selectpicker').selectpicker('val', [1]);

score 11 · Accepted Answer

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
   $('select[name=selValue]').change();
});

これは私のために働いた。

score 9 · Accepted Answer

実際には値が設定されていますが、selectpickerは更新されません

ドキュメントから読むことができるように
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

これを行う正しい方法は

$('.selectpicker').selectpicker('val', 1);

複数の値の場合、値の配列を追加できます

$('.selectpicker').selectpicker('val', [1 , 2]);

score 5 · Accepted Answer

要素でvalメソッドを呼び出すことにより、選択した値を設定できます。

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

これにより、複数選択のすべてのアイテムが選択されます。

$('.selectpicker').selectpicker('selectAll');

詳細はサイトで入手できます：https ：//silviomoreto.github.io/bootstrap-select/methods/

score 5 · Accepted Answer

$('selector').selectpicker('val',value);

セレクターの代わりに、次のようにクラスまたはIDのいずれかのセレクターを指定できます。$('#mySelect').selectpicker('val',your_value)

score 3 · Accepted Answer

3

$('.selectpicker').selectpicker("val", "value");

于 2019-09-07T00:15:05.100 に答える

score 2 · Accepted Answer

オプション（つまり、1、2、3、4など）の「ハードコードされた」値がない場合のblushrtの回答のわずかなバリエーション

<select>一部のユーザーのGUIDであるオプション値を使用してレンダリングするとします。次に、オプションをに設定するために、オプションの値を何らかの方法で抽出する必要があります<select>。

以下では、selectの最初のオプションを選択します。

HTML：

<select name="selValue" class="selectpicker">
   <option value="CD23E546-9BD8-40FD-BD9A-3E2CBAD81A39">Dennis</option>
   <option value="4DDCC643-0DE2-4B78-8393-33A716E3AFF4">Robert</option>
   <option value="D3017807-86E2-4E56-9F28-961202FFF095">George</option>
   <option value="991C2782-971E-41F8-B532-32E005F6A349">Ivanhoe</option>
</select>

Javascript：

// Initialize the select picker.
$('select[name=selValue]').selectpicker();

// Extract the value of the first option.
var sVal = $('select[name=selValue] option:first').val();

// Set the "selected" value of the <select>.
$('select[name=selValue]').val(sVal);

// Force a refresh.
$('select[name=selValue]').selectpicker('refresh');

これを複数のキーワードを使用した選択で使用しました<select multiple>。この場合、デフォルトでは何も選択されていませんが、最初のアイテムが常に選択されるようにしました。

score 2 · Accepted Answer

2

var bar= $(#foo).find("option:selected").val();

于 2016-04-29T04:41:40.633 に答える

score 2 · Accepted Answer

@blushrtのすばらしい回答に基づいて、この応答を更新します。使用するだけ-

$("#Select_ID").val(id);

必要なものすべてをセレクターにプリロードしている場合に機能します。

score 1 · Accepted Answer

また、これを複数の値と呼ぶこともできます

$(<your select picker>).selectpicker("val", ["value1", "value2"])

詳細については、https：//developer.snapappointments.com/bootstrap-select/methods/をご覧ください。

score 1 · Accepted Answer

$('.selectpicker option:selected').val();

ブートストラップselectpickerがに変わり、異なる方法で表示されるため、option：selectedを入力して値を取得します。しかし、まだそこに選択されたものを選択してください

score 1 · Accepted Answer

Bootstrap Selectpicke rを使用する場合は、これを使用して、選択したオプションの値を取得する必要があります。

$('#membershipadmin').selectpicker("option:selected").val();

score 0 · Accepted Answer

0

$('.selectpicker').selectpicker('val', '0');

「0」は選択したいアイテムの値です

于 2017-12-18T04:15:34.537 に答える

score 0 · Accepted Answer

これを行うもう1つの方法は、このキーワードを使用して、この中のオブジェクトを取得し、その値を操作することです。例：

$("select[name=selValue]").click(
    function() {
        $(this).val(1);
    });

score -1 · Accepted Answer

要素のユーザーID、次に

document.getElementById('selValue').value=Your Value;
$('#selValue').selectpicker('refresh');

score -3 · Accepted Answer

-3

これを使用すると、機能します。

 $('select[name=selValue]').selectpicker('val', 1);

于 2013-10-18T16:02:46.367 に答える

jquery - ブートストラップからselectpickerプラグインを使用して選択時に選択値を設定する方法

19 に答える 19

編集：

編集2：

Related

Reference