web-dev-qa-db-ja.com

クリック時のブートストラップ選択でクリックされた値を取得

私はjQueryプラグインを使用しています：bootstrap-select.js私のHTMLはselect（multiple）->オプションです。ユーザーがオプションを選択または選択解除したときに、現在クリックされているオプションの値を取得したいのですが。

例：ユーザーはアイテム4 = console.logアイテム4を選択します。次に、ユーザーはアイテム2 = console.logアイテム2も選択します。現在、取得していますアイテム4、アイテム2 ...それらは常に配列であり、個別ではありません。

私の最終目標は、ユーザーが選択した内容に応じて、ページのdivを表示または非表示にすることです。複数の選択オプションフィールドがあります。

HTMLコード：

<fieldset class="dreamT">
   <select name="team" id="team" multiple class="dropdown selectpicker show-menu-arrow show-tick form-control" title="Pelaajat" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 2">
    <optgroup>
        <option value="item 1">Item 1</option>
        <option value="item 2">Item 2</option>
        <option value="item 3">Item 3</option>
        <option value="item 4">Item 4</option>
        <option value="item 5">Item 5</option>
        <option disabled value="item 6">Item 6</option>
    </optgroup>
   </select>
</fieldset>

JSコード：

$("select#team").on("change", function(value){
   var This      = $(this);
   var selectedD = $(this).val();
   console.log(selectedD);
});

現在の出力：["item 1", "item 3", "item 4", "item 5"]

プラグインサイト： bootstrap-select

javascriptjquerytwitter-bootstrapbootstrap-select
10
Bonttimo

bootstrap-select events で説明されているように、changed.bs.selectイベントを使用できます。

このイベントは、selectの値が変更された後に発生します。次の4つの引数を渡します。

  • 出来事
  • clickedIndex
  • newValue
  • oldValue
$(function () {
  $("#team").on("changed.bs.select", function(e, clickedIndex, newValue, oldValue) {
    var selectedD = $(this).find('option').eq(clickedIndex).text();
    console.log('selectedD: ' + selectedD + '  newValue: ' + newValue + ' oldValue: ' + oldValue);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>



<fieldset class="dreamT">

    <select name="team" id="team" multiple class="dropdown selectpicker show-menu-arrow show-tick form-control" title="Pelaajat" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 2">
        <optgroup>
            <option value="item 1">Item 1</option>
            <option value="item 2">Item 2</option>
            <option value="item 3">Item 3</option>
            <option value="item 4">Item 4</option>
            <option value="item 5">Item 5</option>
            <option disabled value="item 6">Item 6</option>
        </optgroup>
    </select>
</fieldset>
19
gaetanoM

または、オプション要素のイベントを持っている...

$("option").on("click", function(value){
        var This = $(this);
        var selectedD = $(this).val();
        console.log(selectedD);
});

https://jsfiddle.net/adjavaherian/ssqz4sh8/

1
4m1r

これを試して：

console.log(("#your-id option:selected").text());

ref： ここにリンクの説明を入力

0
nageen nayak