CODEWITHSUNDEEP
javascriptjqueryselect
Ahsan Ali
Ahsan Ali

Reputation: 103

select onclick event jquery

I need to test select box values using javascript. But Its outputs the previous value on click, don't know what would be the case.

Here's my code:

            $(document).ready(function(){ 

$('select').click(function(){ 
        var id = this.id;
    var text = $('#'+id+' :selected').text();
 alert(text);

     });
        });

<select id="combo">
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 4</option>
        <option value="5">Test 5</option>
        <option value="6">Test 6</option>
        <option value="7">Test 7</option>
    </select>

I gave the static id for testing purpose, but in real I want to take out the id from select box.

My question is, how can I get the exact value output(HTML) of options on click.

Upvotes: 0

Views: 2955

Answers (2)

renakre
renakre

Reputation: 8291

Here is the common and easy approach:

$("#combo").change(function(){
    var selectedvalue = $( "#combo option:selected" ).text();
});

Upvotes: 0

Vigneswaran Marimuthu
Vigneswaran Marimuthu

Reputation: 2532

$(document).ready(function(){ 


  alert($('#combo').val());
  alert($('#combo option:selected').text());
  
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="combo">
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 4</option>
        <option value="5">Test 5</option>
        <option value="6">Test 6</option>
        <option value="7">Test 7</option>
    </select>

You can use $('select').val(). This will give you the select field value. Listen for change event to capture the changes.

Upvotes: 1

Related Questions