web-dev-qa-db-fra.com

Comment puis-je obtenir la valeur sélectionnée à partir d'un menu déroulant de sélection de bootstrap

J'essaie d'obtenir le texte sélectionné, et non la valeur, à partir de ma liste déroulante d'amorçage, mais mon instruction .text () renvoie une chaîne contenant toutes les valeurs avec un '\ n' entre les deux.

Voici mon rendu 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>

Voici mon javascript, mais selectedText retourne '5-9\n10-15\n16-20\n20 +' Je veux qu'il renvoie 5-9 ou 10-15, etc.

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

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

Vous pouvez obtenir le texte de la valeur sélectionnée avec $(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>

31
Nick Bartlett

Fiddle pour vous

 $(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>

Ceci est basé sur la pseudo-classe css3 :selected. C'est très similaire à :checked , je n'ai pas trouvé de documentation pour :selected

5
J-Dizzle

Au cas où quelqu'un s'en soucierait, j'ai une autre solution. Je viens de regarder les arguments des docs. Vous pouvez faire quelque chose comme ceci (en supposant que vous ayez défini la balise value de l’élément option.:

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

Voir https://silviomoreto.github.io/bootstrap-select/options/

1
coolboyjules