Question

is there any option to add class to the selected li i.e the options selected, if so how cani add and get the values?

close: function(event, ui){
var selectedValues = $('#VendorNum').val();
 $('.ui-multiselect-checkboxes li').each(function(){
    if($(this).is(":selected")){
    alert(selectedValues);   
    }
 });  

}

The alert is not working here

Was it helpful?

Solution

":selected" selector may be used only on "option" elements, not "li".

Try this code:

click: function(event, ui){
 $('.ui-multiselect-checkboxes li').removeClass("highlight");
 $(this).addClass("highlight");  
},
close: function(event, ui){
 alert($('.ui-multiselect-checkboxes').multiselect('getChecked').join(", "));
}

OTHER TIPS

try this:

var selectedValues = $('#VendorNum').val();
 $('.ui-multiselect-checkboxes li').each(function(){
if($(this).is(":selected")){
 $('.liselected').removeClass('liselected');//remove class from previously selected element
  alert(selectedValues);   
 $(this).addClass('liselected');//add class to current selected
 }
 });  
}

you can use addclass and remove class method.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<style>
    .highlight
    {
        color: Red;
    }
</style>
<script>
    $(document).ready(function () {
        $("#myUl li").click(function () {
            $("#myUl li").removeClass("highlight");
            $(this).addClass("highlight");
            alert($(this).html());
        });

    });
</script>
<ul id="myUl">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top