Nhận tùy chọn đã chọn từ phần tử đã chọn

Tôi đang cố gắng lấy tùy chọn đã chọn từ menu thả xuống và điền vào một mục khác bằng văn bản đó, như sau. IE đang gây bão và nó không hoạt động trên Firefox:

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

Tôi đang làm gì sai?

Đây là một phiên bản ngắn:

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

karim79 đã thực hiện tốt, đánh giá theo tên phần tử của bạn txtEntry2có thể là một hộp văn bản, nếu đó là bất kỳ loại đầu vào nào, bạn sẽ cần sử dụng .val()thay thế hoặc .text()như sau:

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

Đối với "có chuyện gì vậy?" một phần của câu hỏi: .text()không sử dụng bộ chọn, nó lấy văn bản bạn muốn đặt hoặc không có gì để trả lại văn bản đã có ở đó. Vì vậy, bạn cần tìm nạp văn bản bạn muốn, sau đó đặt nó vào .text(string)phương thức trên đối tượng bạn muốn thiết lập, giống như tôi đã làm ở trên.

Thử cái này:

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

Đây là một phiên bản ngắn hơn cũng sẽ hoạt động:

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

Với ít jQuery:

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

this.options[this.selectedIndex].value là JavaScript đơn giản.

(Nguồn: Đức TựHTML )

Hãy thử mã sau

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

Để biết số phần tử đã chọn, hãy sử dụng

$("select option:selected").length

Để nhận giá trị của tất cả các phần tử đã chọn, hãy sử dụng

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

Điều này đã làm việc cho tôi:

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

Phần đầu tiên là lấy phần tử từ menu thả xuống có thể trông giống như sau:

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

Để nắm bắt thông qua jQuery, bạn có thể làm như sau:

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

Khi bạn đã lưu trữ giá trị trong biến của mình, bước tiếp theo sẽ là gửi thông tin được lưu trữ trong biến tới trường biểu mẫu hoặc phần tử HTML mà bạn chọn. Nó có thể là một div p hoặc phần tử tùy chỉnh.

I E <p></p> OR <div></div>

Bạn sẽ sử dụng:

$ ('p'). html (lần lặp); HOẶC $ ('div'). Html (lần lặp);

Nếu bạn muốn điền một trường văn bản chẳng hạn như:

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

Bạn sẽ sử dụng:

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

Tất nhiên bạn có thể làm tất cả những điều trên với ít bước hơn, tôi chỉ tin rằng nó sẽ giúp mọi người học khi bạn chia nhỏ tất cả thành các bước dễ hiểu ... Hy vọng điều này sẽ hữu ích!

Sử dụng thuộc tính Đã chọn (HTML5), bạn có thể nhận được (các) tùy chọn đã chọn

document.getElementbyId("id").selectedOptions; 

Với JQuery có thể đạt được bằng cách làm điều này

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

hoặc là

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

Thuộc tính chứa một tương tự mảng HTMLCollection cho một tùy chọn đã chọn này

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

hoặc nhiều lựa chọn

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

Ở trên sẽ rất hiệu quả, nhưng có vẻ như bạn đã bỏ qua kiểu chữ jQuery cho văn bản thả xuống. Ngoài ra, bạn nên sử dụng .val()để đặt văn bản cho phần tử kiểu văn bản đầu vào. Với những thay đổi này, mã sẽ giống như sau:

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

nếu bạn đã có cái này và sử dụng jquery thì đây sẽ là câu trả lời của bạn:

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

Với HTML này:

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

Chọn theo mô tả cho jQuery v1.6 +:

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