Monday, 6 June 2016

Different functionalities on Dropdown or Select box

I have listed down all the possible combinations of using Dropdown box using jQuery.

Pre-Select:

The dropdown is filled with the values and when the form is loaded, a particular value needs to be highlighted (The value may come from database or the default value).

$("#myList option[value='"+ MY_VALUE+"']").prop('selected',true);

----------------------------------------------------------------------------------------------------------------------

Create List:

Sometimes, there are cases where the list need to be created at run time. Following is the piece of code to create the list.

var options = '<option value="' + "ALL" + '">'
                  + "ALL" + '</option>';
         $.each(myList, function( index, value) {
      options += '<option value="' + value+ '">'
                      + value+ '</option>';
      });
     
        $("select#finalList").html(options);

----------------------------------------------------------------------------------------------------------------------

Default to First Item:

$('#myList').get(0).selectedIndex = 0;

----------------------------------------------------------------------------------------------------------------------

No comments:

Post a Comment