我怎麼找到使用jquery選擇選擇的選項textvalue

Question

我想找到選擇標籤的textvalue使用節點:) 我做的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。[Ref]

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