我怎样才能找到使用Jquery选择seleted选项textvalue

时间:2016-04-16 12:28:39

标签: javascript jquery html

我想找到select tag的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>标签文字的价值。(不是价值)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);

1 个答案:

答案 0 :(得分:0)

使用.find('option:selected')查找所选的option元素。 .text()将返回所选元素的textContent。 [Ref]

&#13;
&#13;
$(document).on("change", "[name='category']", function() {
  var textOfOption = $(this).find('option:selected').text();
  $(this).prev().html(textOfOption);
});
&#13;
<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>
&#13;
&#13;
&#13;