7
votes

How Can I get selected text value from the combo box using jQuery.

I am having only "name" of combo box.

So, I want the text of selected item, using the name of combo box, not ID.

I am having ,

var selected_fld = ( $(this).attr('name') );

How can I proceed further ?

5

5 Answers

14
votes
$('select[name=nameOfTheBox]').val();

or

$('select[name=nameOfTheBox] option:selected').val();

will give you the value of the selected option

$('select[name=nameOfTheBox] option:selected').text();

will give you its text

9
votes

This can be done simply with the following to get the actual text value...

var value = $("[name='MyName'] option:selected").text();

or this to get the option 'value' attribute...

var value = $("[name='MyName']").val();

With the following html, the first will give you 'MyText', the second will give you 'MyValue'

<select name="MyName">
   <option value="MyValue" selected="selected">MyText</option>
</select>

Here is a working example

1
votes

try following

<select name="name1">
      <option value="val1">val1</option>
      <option value = "val2">val2</option>
</select>

var text = $("select[name='name1'] option:selected").text();
1
votes
<select id ="myCombo">
   <option value="Play selected="selected">Here</option>
   <option value="Once">Again</option>
</select>

$('#myCombo option:selected').text();

This will return you "here"

$('myCombo option:selected').val();

This will return you "Play"

0
votes
    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            $('#selectnumber').change(function(){
                alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="selectnumber">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
        </select>

    </div>
    </form>
</body>
</html>

Click to See OutPut Screen

Thanks... :)