使用 JQuery 获取 select 标签的 innerHTML 的值

Question

I have this select tag right here

<select id = "options" style = "width:150px;">      
    <option>Artist Name</option>
    <option>Track Name</option>
    <option>Date Uploaded</option>
</select>

I am getting the current selected innerHTML value using JQuery

   var option = $("#options").innerHTML;
   console.log(option);

But each time I print it only returns me a value of undefined.

Answer 1

jQuery object doesn't have the innerHTML property, which belongs to the html dom element object.

var option = $("#options option:selected").html();
console.log(option);

Answer 2

You just need:

 $("#options").val();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id = "options" style = "width:150px;"> <option>Artist Name</option> <option>Track Name</option> <option>Date Uploaded</option> </select>

Answer 3

<form>
<select id = "options" style = "width:150px;">      
    <option>Artist Name</option>
    <option>Track Name</option>
    <option>Date Uploaded</option>
</select>
<input type="text" id="optionstext"/>
<input type="text" id="optionshtml"/>
</form>

    $('#options').change(function(){

        $('#optionstext').val($('#options').text());
        $('#optionshtml').val($('#options').html());

    });

http://jsfiddle.net/pKsC8/8/