Bind Values To Dropdown List Using KnockoutJS

  1. @{    
  2. Layout = null;    
  3. }    
  4.   
  5. <!DOCTYPE html>  
  6. <html>  
  7.     <head>  
  8.         <meta name="viewport" content="width=device-width" />  
  9.         <title>DropDown</title>  
  10.         <script src="~/Scripts/jquery-2.2.0.js"></script>  
  11.         <script src="~/Scripts/knockout-3.4.0.js"></script>  
  12.     </head>  
  13.     <body>  
  14.         <div>  
  15.             <label> Color : </label>  
  16.             <select data-bind="value: selectedColor">  
  17.                 <option>Red</option>  
  18.                 <option>Green</option>  
  19.                 <option>Blue</option>  
  20.                 <option>White</option>  
  21.                 <option>Orange</option>  
  22.                 <option>Black</option>  
  23.             </select>  
  24.         </div>  
  25.     </body>  
  26. </html>  
  27. <script>    
  28. var viewModel = ko.observable({    
  29. selectedColor: "Blue"    
  30. });    
  31. ko.bind($("select"), viewModel);    
  32. </script>