jquery获取选定的选项值给出未定义

Question

I am trying to get selected option value from post format Wordpress dashboard. But when I am trying to get option value in alert also in the console, it is giving me undefined. Is there anywhere I am doing wrong?

(function ($){
    "use strict";

    $(document).ready(function () {

        var conceptName = $('#post-format-selector-0 ').find("option:selected").val();

        var values = $('#post-format-selector-0 :selected').val();

        alert(conceptName);

        console.log(values);

    });
})(jQuery);

screenshot1

screenshot2

Answer 1

Just use the children() function and pass your selector

var conceptName = $('#post-format-selector-0 ').children("option:selected").val();

take a lock at this script

(function ($){
"use strict";

$(document).ready(function () {
       alert( "val:" + $('#post-format-selector-0 ').val());
       alert( "find:" + $('#post-format-selector-0 ').find("option:selected").val());
       alert( "children:" + $('#post-format-selector-0 ').children("option:selected").val());
});
})(jQuery);

Answer 2

To get value of selected option

var conceptName = $('#post-format-selector-0 option:selected').val();

To get text of selected option

var conceptName = $('#post-format-selector-0 option:selected').text();

Answer 3

You can just use .val() on the select element:

 $(function() { $('button').on('click', function() { $('pre').html($('#demo').val()); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="demo"> <option value="foo">Foo</option> <option value="bar">Bar</option> </select> <button>Get value</button> <pre></pre>