When i click on a option how to make that option as selected in JQUery??

Question

HI, i am having a select dropdown like

   <select id="listForms">
 <option value="Personal Form" id="25">Personal Form</option>
 <option value="Employee Details Form" id="24">Employee Details Form</option>
 <option value="Contact Form" id="45">Contact Form</option>


     </select>

When i click on a option how to make that option as selected in JQUery??

Edit :

i have tried it with

     $("#listForms option").click(function (){
      $("#listForms option").attr("selected",true); but not working

     });

also how to find which one has been selected later?? in JQuery ?? please suggest me..

Answer 1

Maybe this is what you need: http://jgeewax.wordpress.com/2008/09/01/jquery-dropdown-fun/

EDIT - with props to the site mentioned above:

This is the final solution he gives:

<script type="text/javascript">
    $(document).ready(function() {
        $("select.links").change(function() {
             window.location = $(this).val();
        });
    });
</script>

With this html snippet:

<select class="links">
    <option disabled="disabled" selected="selected">—</option>
    <option value="http://www.google.com/"&gt;Google&lt;/option&gt;
    <option value="http://www.yahoo.com/"&gt;Yahoo&lt;/option&gt;
</select>

Answer 2

$("#listForms option:selected");

will get the selected option.

Answer 3

I'm guessing you want the vaule and id from the options?... try this:

<select id="listForms">
 <option value="">Select a Form</option>
 <option value="Personal Form" id="25">Personal Form</option>
 <option value="Employee Details Form" id="24">Employee Details Form</option>
 <option value="Contact Form" id="45">Contact Form</option>
</select>

<script type="text/javascript">
$(document).ready(function() {
 $("#listForms").change(function() {
  alert( "Selected Option: id = " + $(this).find('option:selected').attr("id") + ", " + $(this).val() );
 });
});
</script>

Answer 4

With the following HTML

<select id="listForms">
    <option value="Personal Form" id="25">Personal Form</option>
    <option value="Employee Details Form" id="24">Employee Details Form</option>
    <option value="Contact Form" id="45">Contact Form</option>
</select>

The following jQuery would tell pop up an alert box with the value you've specified:

$(document).ready(function() {
    $("select#listForms").change(function() {
         alert($(this).val());
    });
});

For example, when you click "Personal Form", you'd see an alert window that says "Personal Form".

You could change $(this).val() to $(this).attr('id') if you wanted "25" to pop up when you choose the "Personal Form" option.