how can i find use the Jquery select that seleted option textvalue

Question

I want to find select tag's textvalue to use node .:) I made that div container is addable. that contains <span> and <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>

All <div> containers name is category. I want to add value that selected <option> tags text.(not value ex)BANANA)

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

  //$(this) means <select>tag

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

}); 

I tried this and failed...:(...

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

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

            testop=item.text();

            }

            });

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

Answer 1

Use .find('option:selected') to find the selected option element. .text() will return the textContent of the selected element. [ 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>