どのように私はJqueryを使用して見つけることができます選択されたオプションのテキスト値を

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>