Pobierz wybraną opcję z wybranego elementu

Próbuję pobrać wybraną opcję z listy rozwijanej i wypełnić inny element tym tekstem w następujący sposób. IE szczeka na burzę i nie działa w przeglądarce Firefox:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

Co ja robię źle?

Oto krótka wersja:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79 zrobił dobry chwyt, sądząc po nazwie twojego elementu, txtEntry2może to być pole tekstowe, jeśli jest to jakiś rodzaj danych wejściowych, musisz użyć .val()zamiast tego lub w .text()ten sposób:

  $('#txtEntry2').val($(this).find(":selected").text());

Na pytanie „co się stało?” część pytania: .text()nie pobiera selektora, pobiera tekst, który chcesz ustawić, lub nic, aby zwrócić tekst, który już tam jest. Musisz więc pobrać żądany tekst, a następnie umieścić go w .text(string)metodzie na obiekcie, który chcesz ustawić, tak jak mam powyżej.

Spróbuj tego:

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});

Oto krótsza wersja, która również powinna działać:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

Z mniejszą ilością jQuery:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value to zwykły JavaScript.

(Źródło: niemiecki SelfHTML )

Spróbuj wykonać następujący kod

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});

Aby poznać liczbę wybranych elementów, użyj

$("select option:selected").length

Aby uzyskać wartość wszystkich wybranych elementów użyj

    var str = "";
  $("select option:selected").each(function () {
        str += $(this).text() + " ";
      });

To zadziałało dla mnie:

$("#SelectedCountryId_option_selected")[0].textContent

Pierwsza część to pobranie elementu z rozwijanego menu, które może wyglądać tak:

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

Aby przechwycić przez jQuery, możesz zrobić coś takiego:

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

Po zapisaniu wartości w zmiennej, następnym krokiem będzie wysłanie informacji przechowywanych w zmiennej do wybranego pola formularza lub elementu HTML. Może to być element div p lub niestandardowy.

to znaczy <p></p> OR <div></div>

Użyłbyś:

$ ('p'). html (iteracje); OR $ ('div'). Html (iteracje);

Jeśli chcesz wypełnić pole tekstowe, takie jak:

<input type="text" name="textform" id="textform"></input>

Użyłbyś:

$ ('# textform'). text = iteracje;

Oczywiście możesz wykonać wszystkie powyższe czynności w mniejszych krokach, po prostu uważam, że pomaga to ludziom uczyć się, gdy rozbijasz to wszystko na łatwe do zrozumienia kroki ... Mam nadzieję, że to pomoże!

Korzystając z właściwości selectedOptions (HTML5), możesz pobrać wybrane opcje

document.getElementbyId("id").selectedOptions; 

Dzięki JQuery można to osiągnąć

$("#id")[0].selectedOptions; 

lub

$("#id").prop("selectedOptions");

Właściwość zawiera tablicę HTMLCollection podobną do tej jednej wybranej opcji

[<option value=​"1">​ABC</option>]

lub kilka wyborów

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]

Powyższe byłoby bardzo dobrze działające, ale wygląda na to, że przegapiłeś typoszereg jQuery dla rozwijanego tekstu. Poza tym wskazane byłoby użycie .val()do ustawienia tekstu dla elementu typu tekstu wejściowego. Po wprowadzeniu tych zmian kod wyglądałby następująco:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

jeśli już to masz i używasz jquery, to będzie twoja odpowiedź:

$ ($ (this) [0] .selectedOptions [0]). text ()

Biorąc pod uwagę ten HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Wybierz według opisu dla jQuery v1.6 +:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);