Post
Ask Question

Options Binding in Drop-Down List Using Knockout

Introduction

 
In my previous article I explained:
Today's article explains Options Binding with a Drop-Down List using Knockout.
 
Step 1
 
First of all, you need to add an external Knockout js file into your application, you can either download it from the internet or can download my application that is available at the beginning of this article in Zip Format and then can use the file attached with this Zip file.
 
After downloading the file you need to call it in the head section of your application.
  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="knockout-2.3.0.js"></script>  
  4. </head> 
Step 2
 
Now we can work on our application. First we will work on the ViewModel. For this you need to add a Script tag under the Body Section and then need to add this code:
  1. <script type="text/javascript">  
  2. function Car(name, price) {  
  3.     this.carName = name;  
  4.     this.price = price;  
  5. };  
  6.   
  7. function x() {  
  8.     availableCars = ko.observableArray([  
  9.         new Car("i10", 450000),  
  10.         new Car("120", 700000),  
  11.         new Car("Verna", 1200000)  
  12.     ]);  
  13.     selectedCar = ko.observable();  
  14. };  
  15. ko.applyBindings(new x());  
  16. </script>  
Here first I had declared a function named Car, in this function carName and price are declared.
 
Then another function that is the main function is named "x()" is declared, in this function an Observable and an Observable Array is declared.
 
In function x() an array is declared that is made Observable. In this array some carName with their Price is declared.
 
Then an Observable is created named selectedCar.
 
At the end binding is applied to the function "x()."
 
Step 3
 
Now we will work on the view of our application. Write this code in the view part of your application:
  1. <div>  
  2.     <label>Choose Your Car</label>  
  3.     <select data-bind="options: availableCars, optionsText: 'carName', value: selectedCar, optionsCaption: 'Choose...'"></select>  
  4.     <br />  
  5.     <br />  
  6.     <div data-bind="visible: selectedCar">  
  7.         Choosed Car is of Rs  
  8.         <span data-bind="text: selectedCar() ? selectedCar().price : 'unknown'"></span>.  
  9.     </div>  
  10. </div>  
Here I used a Drop Down List that bound to the avilableCars array. This List will show the Car Name that is provided through the carName. It will hold the value of the selected by using the selectedCar Observable.
 
Then a Div is created that will be visible only when the user selects a car from the available options.
 
This div contains a span that will show the price of the car that is selected by the user.
 
Now our application is ready to be debugged.
 
The complete code of this application is as follows:
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3.     <head runat="server">  
  4.         <title></title>  
  5.         <script src="knockout-2.3.0.js"></script>  
  6.     </head>  
  7.   
  8.     <body>  
  9.         <form id="form1" runat="server">  
  10.             <div>  
  11.                 <label>Choose Your Car</label>  
  12.                 <select data-bind="options: availableCars, optionsText: 'carName', value: selectedCar, optionsCaption: 'Choose...'"></select>  
  13.                 <br />  
  14.                 <br />  
  15.                 <div data-bind="visible: selectedCar">  
  16.                     Choosed Car is of Rs  
  17.                     <span data-bind="text: selectedCar() ? selectedCar().price : 'unknown'"></span>.  
  18.                 </div>  
  19.             </div>  
  20.             <script type="text/javascript">  
  21.             function Car(name, price) {  
  22.                 this.carName = name;  
  23.                 this.price = price;  
  24.             };  
  25.   
  26.             function x() {  
  27.                 availableCars = ko.observableArray([  
  28.                     new Car("i10", 450000),  
  29.                     new Car("120", 700000),  
  30.                     new Car("Verna", 1200000)  
  31.                 ]);  
  32.                 selectedCar = ko.observable();  
  33.             };  
  34.             ko.applyBindings(new x());  
  35.             </script>  
  36.         </form>  
  37.     </body>  
  38.   
  39. </html>  
Output
 
First of all this type of output window will be shown on your screen.
 
options binding using knockout1
 
Now if I click on the drop down then all the options will be shown in the list.
 
options binding using knockout2
 
Now I am selecting an option from the available ones and you will see that its price will be shown automatically.
 
options binding using knockout3


Similar Articles