web-dev-qa-db-ja.com

bootstrap selectドロップダウンから選択した値を取得するにはどうすればよいですか？

bootstrapドロップダウンから値ではなく、選択したテキストを取得しようとしていますが、私の.text（）ステートメントは、 '\ n'のすべての値を含む文字列を返しています間に。

これが私のレンダリングされたhtmlです

<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
    <option selected="selected" value="0">1-4</option>
    <option value="1">5-9</option>
    <option value="2">10-15</option>
    <option value="3">16-20</option>
    <option value="4">20+</option>
</select>

ここに私のJavaScriptがありますが、selectedTextは「5-9\n10-15\n16-20\n20 +」を返します。5-9または10-15などを返します。

$('#SpaceAccommodation').change(function () {

    var selectedText = $(this).text();
});
javascriptjqueryhtmltwitter-bootstrap
18
user1186050

$(this).find("option:selected").text()を使用して、選択した値のテキストを取得できます。

$('#SpaceAccommodation').change(function () {
    var selectedText = $(this).find("option:selected").text();
    
    $(".test").text(selectedText);
});
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
    <option selected="selected" value="0">1-4</option>
    <option value="1">5-9</option>
    <option value="2">10-15</option>
    <option value="3">16-20</option>
    <option value="4">20+</option>
</select>
<div class="test"></div>
32
Nick Bartlett

あなたのためのフィドル

 $(document).ready(function () {
     $('.chzn-select').change(function () {
         alert( $('.chzn-select option:selected').text());
     });
 });

<select id="second" class="chzn-select" style="width: 100px">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

これは、css3疑似クラス:selectedに基づいています。 :checked と非常によく似ていますが、:selectedのドキュメントが見つかりませんでした

6
J-Dizzle

誰も気にしない場合、別の解決策があります。私はドキュメントからの議論を見ました。次のようなことができます（option要素のvalueタグを設定したと仮定します。

 $('#type_dropdown')
                .on('changed.bs.select',
                    function(e, clickedIndex, newValue, oldValue) {
                        alert(e.target.value);
                    });
        });

https://silviomoreto.github.io/bootstrap-select/options/ を参照してください

1
coolboyjules