locked
Knockout JS: Get dropdown selected data and populate other fields RRS feed

  • Question

  • User1856468055 posted

    Using Knockout JS here.

    I have a HTML table and the table has 4 columns. I have button to add a row to table and then remove button against each row to delete it. I also have a dropdown in the first column of this table. The dropdown is populated from the button click event outside the table.

    My knockout code can be seen in the jsfiddle link as below.

    What I am looking for is:

    When the user selects the dropdown the selected dropdown text gets populated to that rows one column and the value gets populated to that rows other columns/cell.

    My Issue:

    1.) I am not able to get the selected text and selected value from the dropdown

    2.) Secondly I don't know how I could update other column values based on the dropdown selection.

    Here is my fiddle:

    https://jsfiddle.net/aman1981/njbyumrs/12/

    Inputs are appreciated.

    Thursday, March 15, 2018 3:16 PM

Answers

  • User283571144 posted

    Hi  John,

    According to your description, I suggest you could refer to below codes:

    You should create the observable array with the select item.

    Then KO will auto changed when changing the ddl.

    More details, you could refer to below codes:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="Scripts/knockout-3.4.2.js"></script>
    
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Input</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: seats">
                <tr>
                    <td><input data-bind="value: name" /></td>
                    <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'FirstName',optionsCaption: '--Select--'"></select></td>
                    <td data-bind="text: meal().FirstName"></td>
                    <td data-bind="text: meal().LastName"></td>
                    <td data-bind="text: meal().Address"></td> 
                    <td>
                        <input type="button" value="Remove Row" data-bind="click: $root.removeRow"   />
                    </td>
    <td>
    </tr>
            </tbody>
        </table>
    
        <button data-bind="click: addSeat">Addnewrow</button>
        <script>
    
            // Class to represent a row in the seat reservations grid
            function SeatReservation(name, initialMeal) {
                var self = this;
                self.name = name;
                self.meal = ko.observable(initialMeal);
            }
    
            // Overall viewmodel for this screen, along with initial state
            function ReservationsViewModel() {
                var self = this;
                var c = '[{"FirstName":"Alex","LastName":"Sanders","Address":123},{"FirstName":"Sam","LastName":"Billings","Address":"Mahony Street"}]';
                 var jsonResult = JSON.parse(c);
                // Non-editable catalog data - would come from the server
                self.availableMeals = [
                ];
    
                for (key in jsonResult) {
                    var item = {
                        FirstName: jsonResult[key].FirstName,
                        LastName: jsonResult[key].LastName,
                        Address:jsonResult[key].Address
                    };
                    self.availableMeals.push(item);
                }
    
    
                // Editable data
                self.seats = ko.observableArray([
                    new SeatReservation("1", self.availableMeals[0]),
                    new SeatReservation("2", self.availableMeals[0])
                ]);
    
                // Operations
                self.removeRow = function (data) {
                    self.seats.remove(data);
                }
    
                self.addSeat = function () {
                    self.seats.push(new SeatReservation("", self.availableMeals[0]));
                }
            }
    
            ko.applyBindings(new ReservationsViewModel());
    
        </script>
    </body>
            
    </html>
    

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 17, 2018 8:14 AM

All replies

  • User283571144 posted

    Hi  John,

    According to your description, I suggest you could refer to below codes:

    You should create the observable array with the select item.

    Then KO will auto changed when changing the ddl.

    More details, you could refer to below codes:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="Scripts/knockout-3.4.2.js"></script>
    
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Input</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: seats">
                <tr>
                    <td><input data-bind="value: name" /></td>
                    <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'FirstName',optionsCaption: '--Select--'"></select></td>
                    <td data-bind="text: meal().FirstName"></td>
                    <td data-bind="text: meal().LastName"></td>
                    <td data-bind="text: meal().Address"></td> 
                    <td>
                        <input type="button" value="Remove Row" data-bind="click: $root.removeRow"   />
                    </td>
    <td>
    </tr>
            </tbody>
        </table>
    
        <button data-bind="click: addSeat">Addnewrow</button>
        <script>
    
            // Class to represent a row in the seat reservations grid
            function SeatReservation(name, initialMeal) {
                var self = this;
                self.name = name;
                self.meal = ko.observable(initialMeal);
            }
    
            // Overall viewmodel for this screen, along with initial state
            function ReservationsViewModel() {
                var self = this;
                var c = '[{"FirstName":"Alex","LastName":"Sanders","Address":123},{"FirstName":"Sam","LastName":"Billings","Address":"Mahony Street"}]';
                 var jsonResult = JSON.parse(c);
                // Non-editable catalog data - would come from the server
                self.availableMeals = [
                ];
    
                for (key in jsonResult) {
                    var item = {
                        FirstName: jsonResult[key].FirstName,
                        LastName: jsonResult[key].LastName,
                        Address:jsonResult[key].Address
                    };
                    self.availableMeals.push(item);
                }
    
    
                // Editable data
                self.seats = ko.observableArray([
                    new SeatReservation("1", self.availableMeals[0]),
                    new SeatReservation("2", self.availableMeals[0])
                ]);
    
                // Operations
                self.removeRow = function (data) {
                    self.seats.remove(data);
                }
    
                self.addSeat = function () {
                    self.seats.push(new SeatReservation("", self.availableMeals[0]));
                }
            }
    
            ko.applyBindings(new ReservationsViewModel());
    
        </script>
    </body>
            
    </html>
    

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 17, 2018 8:14 AM
  • User1856468055 posted

    Thanks for the help.

    Tuesday, March 27, 2018 11:54 AM