Dynamically Changing the child list item background color on the click of parent list item using JQuery

This article is basically focused on how we can change the child list item background color on the click of parent list item using Jquery.

Source code


<html>
<head>
     <style>
        .changebackgroundchild {
            background-color: yellow;
        }
    </style>
    <script src="Script/jquery-1.8.2.min.js"></script>
</head>
<body>
      <h3> Dynamically Changing the child list item background color on the click of parent list item using JQuery </h3>

    <p> Click on the Parent list item based on which the Child list item background color change.</p>


    <p> Parent List Item</p>
    <ol id='parentid'>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ol>

    <p> Child List Item</p>
    <ol type="A" id="childid">
        <li id="A">Coffee</li>
        <li id="B">Tea</li>
        <li id="C">Milk</li>
        <li id="D">Green Tea</li>
    </ol>

    <script type="text/javascript">
        $('#parentid li').on('click', function (event) {
           var parid = $(this).text();
           $('#childid li').removeClass('changebackgroundchild');
           $('#childid').find('li').change('id', parid)
           $('li#' + parid).addClass('changebackgroundchild');                       
        });
    </script>

</body>
</html>

After running the above code you will get the following output
JquerySample1

JquerySample2

Happy coding 😉 …………..

Multi-Select List/Drop Down in Asp.Net MVC4

This article is basically focused on how we can use Multi-Select List/ Drop Down using Asp.Net MVC4 and Bootstrap.

Basic steps for selecting multiple values from Multi-Select List/Drop Down List using Asp.Net MVC and Bootstrap.

Step 1:- Create the model class with name as MoviesModel

public class MoviesModel
{
// This will hold the selected values in List/Drop Down Box 
public string[] SelectMovies { get; set; }
Public IEnumerable AllMovies { get; set; }
}

Step 2:- Create new controller with name as MoviesController

public class MoviesController : Controller
{
   // GET: /Movies
         public ActionResult Index()
         {
               MoviesModel movmod=new MoviesModel();
               movmod.SelectMovies= new string[] { "1","2" };
               movmod.AllMovies = GetAllMovies();
               return View(movmod);
         }

         private IEnumerable<SelectListItem> GetAllMovies()
        {
            List<SelectListItem> allmov = new List<SelectListItem>();
            allmov.Add(new SelectListItem { Value = "1", Text = "Terminator" });
            allmov.Add(new SelectListItem { Value = "2", Text = "Harry Potter" });
            allmov.Add(new SelectListItem { Value = "3", Text = "Matrix" });
            allmov.Add(new SelectListItem { Value = "4", Text = "Fast and Furious" });
            allmov.Add(new SelectListItem { Value = "5", Text = "Tokyo Drift" });
            allmov.Add(new SelectListItem { Value = "6", Text = "Spider Man" });
            allmov.Add(new SelectListItem { Value = "7", Text = "Men In Black" });
            return allmov.AsEnumerable();
        }
      
  // POST: /Movies
         [HttpPost]
        public ActionResult Index(MoviesModel movmodel)
        {            
               movmodel.AllMovies = GetAllMovies();
               return View(movmodel);
        }

}

Step 3:- Create new view with name as Index


     @{
         ViewBag.Title = "Index";
      }

      <h2>Example of Multiselect List/ Drop down in Asp.Net MVC4</h2>

      @model MvcAssign.Models.MoviesModel

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"   rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
      <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
      <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

        @using (Html.BeginForm())
        { 
             <div class="form-group">
              <label class="col-lg-2 control-label" for="movies">Movies:</label>
               <div class="col-lg-10">
                @Html.ListBoxFor((m => m.SelectMovies), new SelectList(Model.AllMovies, "Value", "Text", Model.SelectMovies), new { @class = "multiselect", multiple = "multiple", id = "lstMovies" })
            
                 @*@Html.DropDownListFor((m => m.SelectMovies), new SelectList(Model.AllMovies, "Value", "Text", Model.SelectMovies), new { @class = "multiselect", multiple = "multiple", id = "lstFruits",allowmultiple=true })*@

                </div>
             </div>
             <br />    
             <input type="submit" value="Submit" style="margin-left:48px;" />
        }


   <script type="text/javascript">
        $(function () {
          $('[id*=lstMovies]').multiselect({
              includeSelectAllOption: true                
               });
           });
    </script>

 

After running the above code you will get the following output

MultiSelectDropDown_1

MultiSelectDropDown_2

After Http Post(i.e on button click) we will get the selected item in List/Drop Down box as shown below.

MultiSelectDropDown_3

In the next article we will see the filtering and List/Drop Down box value through JQuery.

Reference for Multi-Select Bootstrap js
http://davidstutz.github.io/bootstrap-multiselect/

🙂 Happy Coding…