Saturday, September 7, 2013

How to handle select and option tag in jquery?

1. Set and get value to single selection select - We can set value of single selection select using val() function.
Example1 -
<Select id="number">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

<script>
    $("#number").val(2);

        var value = $("#number").val();
</script>

In above example in number list selected option is 2(Two). If we pass parameter to val() fucntion. That set value to element. First element set value and second statement get current selected value.

2. Handle multiple selection - In multiple selection list, user can select multiple optin for that need to add (multiple="multiple") attribute. To get all selected value, need to pass optin:selected selector. See folowing example
Example2 -
<Select id="number" multiple="multiple">
    <option value="1">One</option>
    <option value="2" selected="selected">Two</option>
    <option value="3">Three</option>
    <option value="4" selected="selected">Four</option>
    <option value="5">Five</option>
</select>

<script>
    //Get all selected optin
    var selectedOption = $("#number option:selected);

    //Loop for all selected optin
        $("#number option:selected").each(function() {
        //get option object
        var option = $(this);

        //Get option value
         var value = $(this).val();

        //Get optin text
        var text = $(this).text();
        //Write your code here
    }
</script>

In above example we can use optin:selector to get all selected option. In loop we can get optin object, its value and text.

3. Shift all selected optin into ne select list to another - loop all selected optin for first select and push into another.
Example3 -
<Select id="numberList1" multiple="multiple">
    <option value="1">One</option>
    <option value="2" selected="selected">Two</option>
    <option value="3">Three</option>
    <option value="4" selected="selected">Four</option>
    <option value="5">Five</option>
</select>

<Select id="numberList2" multiple="multiple">
    <option value="10">Ten</option>
    <option value="12" selected="selected">Twel</option>
    <option value="13">Thirteen</option>
    <option value="14" selected="selected">Fourtheen</option>
    <option value="15">Fifteen</option>
</select>

<script>
    //Get all selected optin
    var selectedOption = $("#number option:selected);

    //Loop for all selected optin
        $("#numberList1 option:selected").each(function() {
        //Create new option for second list
        $("#numberList2").append($('<option>', {
                    value: $(this).val(),
                    text : $(this).text()
                })
        );

        //Remove first optin from list1
        $(this).remove();       
    }
</script>

In above example, All selected optins and move into another.

No comments:

Post a Comment

Total Pageviews