jQuery nhận văn bản thẻ tùy chọn cụ thể

Được rồi, nói rằng tôi có cái này:

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

Công cụ chọn sẽ trông như thế nào nếu tôi muốn nhận "Tùy chọn B" khi tôi có giá trị '2'?

Xin lưu ý rằng đây không phải là hỏi làm thế nào để có được giá trị văn bản đã chọn , mà chỉ bất kỳ một trong số chúng, dù được chọn hay không, tùy thuộc vào thuộc tính giá trị. Tôi đã thử:

$("#list[value='2']").text();

Nhưng nó không hoạt động.

Đó là tìm kiếm một phần tử có id listcó thuộc tính valuebằng 2.
Những gì bạn muốn là optioncon của list:

$("#list option[value='2']").text()

Nếu bạn muốn nhận tùy chọn có giá trị là 2, hãy sử dụng

$("#list option[value='2']").text();

Nếu bạn muốn nhận tùy chọn nào hiện đang được chọn, hãy sử dụng

$("#list option:selected").text();

Điều này hoạt động hoàn hảo với tôi, tôi đang tìm cách gửi hai giá trị khác nhau với các tùy chọn được tạo bởi MySQL và sau đây là chung chung và động:

$(this).find("option:selected").text();

Như đã đề cập trong một trong những ý kiến. Với điều này, tôi có thể tạo một hàm động hoạt động với tất cả các hộp lựa chọn mà tôi muốn nhận cả hai giá trị, giá trị tùy chọn và văn bản.

Vài ngày trước tôi nhận thấy rằng khi cập nhật jQuery từ 1.6 lên 1.9 của trang tôi đã sử dụng mã này, việc này dừng hoạt động ... có lẽ là xung đột với một đoạn mã khác ... dù sao, giải pháp là xóa tùy chọn khỏi tìm () gọi:

$(this).find(":selected").text();

Đó là giải pháp của tôi ... chỉ sử dụng nó nếu bạn gặp bất kỳ vấn đề nào sau khi cập nhật jQuery.

Dựa trên HTML gốc được đăng bởi Paolo, tôi đã đưa ra những điều sau đây.

$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Nó đã được thử nghiệm để hoạt động trên Internet Explorer và Firefox.

$("#list option:selected").each(function() {
   alert($(this).text());
});  

cho nhiều giá trị được chọn trong #listphần tử.

1. Nếu chỉ có một thẻ chọn trong trang thì bạn có thể chỉ định chọn bên trong id 'list'

   jQuery("select option[value=2]").text();

2. Để có được văn bản đã chọn

   jQuery("select option:selected").text();

Hãy thử như sau:

$("#list option[value=2]").text();

Lý do tại sao đoạn mã gốc của bạn không hoạt động là vì các OPTIONthẻ của bạn là con của SELECTthẻ, trong đó có id list.

Đây là một Câu hỏi cũ chưa được cập nhật trong một thời gian, cách chính xác để làm điều này bây giờ sẽ là sử dụng

$("#action").on('change',function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Tôi hi vọng cái này giúp được :-)

Tôi muốn có được nhãn đã chọn. Điều này làm việc cho tôi trong jQuery 1.5.1.

$("#list :selected").text();

$(this).children(":selected").text()

$("#list [value='2']").text();

chừa một khoảng trống sau bộ chọn id.

Bạn có thể nhận được văn bản tùy chọn đã chọn bằng cách sử dụng chức năng .text();

bạn có thể gọi hàm như thế này:

jQuery("select option:selected").text();

Trong khi "lặp" thông qua các phần tử chọn được tạo động với một .each (function () ...): $("option:selected").text();và $(this + " option:selected").text()không trả về văn bản tùy chọn đã chọn - thay vào đó là null.

Nhưng giải pháp của Peter Mortensen đã có hiệu quả:

$(this).find("option:selected").text();

Tôi không biết tại sao cách thông thường không thành công trong một .each()(có thể là sai lầm của riêng tôi), nhưng cảm ơn bạn, Peter. Tôi biết đó không phải là câu hỏi ban đầu, nhưng tôi đang đề cập đến nó "cho những người mới đến thông qua Google."

Tôi đã bắt đầu với $('#list option:selected").each()ngoại trừ tôi cần phải lấy nội dung từ phần tử chọn.

Sử dụng:

function selected_state(){
    jQuery("#list option").each(function(){
        if(jQuery(this).val() == "2"){
            jQuery(this).attr("selected","selected");
            return false;
        }
    });
}

jQuery(document).ready(function(){
    selected_state();
});

Tôi đang tìm kiếm val theo tên trường nội bộ thay vì ID và từ google đến bài đăng này giúp đỡ nhưng không tìm thấy giải pháp tôi cần, nhưng tôi đã có giải pháp và đây là:

Vì vậy, điều này có thể giúp ai đó tìm kiếm giá trị được chọn bằng tên nội bộ của trường thay vì sử dụng id dài cho danh sách SharePoint:

var e = $('select[title="IntenalFieldName"] option:selected').text(); 

Tôi cần câu trả lời này khi tôi đang xử lý một đối tượng được tạo động và các phương thức khác ở đây dường như không hoạt động:

element.options[element.selectedIndex].text

Điều này tất nhiên sử dụng đối tượng DOM thay vì phân tích cú pháp HTML của nó bằng nodeValue, childNodes, v.v.

Mẹo: bạn có thể sử dụng mã bên dưới nếu giá trị của bạn là động:

$("#list option[value='"+aDynamicValue+"']").text();

Hoặc (phong cách tốt hơn)

$("#list option").filter(function() {
     return this.value === aDynamicValue;
}).text();

Như đã đề cập trong jQuery, lấy văn bản thẻ tùy chọn cụ thể và đặt biến động cho giá trị

Là một giải pháp thay thế, bạn cũng có thể sử dụng một phần ngữ cảnh của bộ chọn jQuery để tìm <option>(các) phần tử value="2"bên trong danh sách thả xuống:

$("option[value='2']", "#list").text();

Tôi muốn có một phiên bản động để chọn nhiều phiên bản sẽ hiển thị những gì được chọn ở bên phải (muốn tôi đọc và xem $(this).find... trước đó):

<script type="text/javascript">
    $(document).ready(function(){
        $("select[showChoices]").each(function(){
            $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
            doShowSelected($(this).attr('id'));//shows initial selections
        }).change(function(){
            doShowSelected($(this).attr('id'));//as user makes new selections
        });
    });
    function doShowSelected(inId){
        var aryVals=$("#"+inId).val();
        var selText="";
        for(var i=0; i<aryVals.length; i++){
            var o="#"+inId+" option[value='"+aryVals[i]+"']";
            selText+=$(o).text()+"<br>";
        }
        $("#spn"+inId).html(selText);
    }
</script>
<select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
    <option selected="selected" value=1>opt 1</option>
    <option selected="selected" value=2>opt 2</option>
    <option value=3>opt 3</option>
    <option value=4>opt 4</option>
</select>

Bạn có thể có được một trong những cách sau

$("#list").find('option').filter('[value=2]').text()

$("#list").find('option[value=2]').text()

$("#list").children('option[value=2]').text()

$("#list option[value='2']").text()

$(function(){    
    
    console.log($("#list").find('option').filter('[value=2]').text());
    console.log($("#list").find('option[value=2]').text());
    console.log($("#list").children('option[value=2]').text());
    console.log($("#list option[value='2']").text());
    
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>