我如何找到使用 Jquery 選擇該選項的文本值

Question

我想找到 select 標簽的 textvalue 來使用 node 。:) 我讓那個 div 容器是可添加的。 包含<span>和<select>

<div class="selector" style="width: 140px;">

    <span style="width: 128.4px; -webkit-user-select: none;">::before</span>

          <select id="category0" name="category" class="category">

            <option selected="selected" value="0">Select a category</option>

            <option value="0">All</option>

            <option value="01">TOMATO</option>

            <option value="02">APPLE</option>

            <option value="03">BANANA</option>

        </select>

</div>

所有<div>容器名稱都是類別。 我想添加選定<option>標記文本的值。（不是值 ex）BANANA）

$(document).on("change","[name='category']",function(){

  //$(this) means <select>tag

    $(this).prev().html( "I want to contain selected options text" );

}); 

我試過了，但失敗了...:(...

       $(this).children().each(function(index,item){

            if(item.attr("value")==findval){

            testop=item.text();

            }

            });

        $(this).prev().html(testop);

Answer 1

使用.find('option:selected')查找選定的option元素。 .text()將返回所選元素的textContent 。 [參考]

 $(document).on("change", "[name='category']", function() { var textOfOption = $(this).find('option:selected').text(); $(this).prev().html(textOfOption); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <span style="width: 128.4px; -webkit-user-select: none;">::before</span> <select id="category0" name="category" class="category"> <option selected="selected" value="0">Select a category</option> <option value="0">All</option> <option value="01">TOMATO</option> <option value="02">APPLE</option> <option value="03">BANANA</option> </select>