Q:

Set drop down value in knockout

I have a table(two column) to which we can add and remove rows.
First    column is a dropdown and Second is a textarea.

I want to be able to push a new row into the table with values.
I tried the below code but only was able to push the comments text but not the selected option how do I get the dropdown to be selected as the value provided(from 'result').
JS:(VM)
    function RowData1(IDS, Comments) {
        var self = this;

        self.Comments = ko.observable(Comments).extend({ required: true });
        self.IDS = [{ value: "0", ids: "Choose..." }, { value: "1", ids: "Drip" }, { value: "2", ids: "Flood - Ditch" }, { value: "3", ids: "Flood - Gated Pipe" }, { value: "4", ids: "Pivot" }, { value: "5", ids: "Sprinkler" }, { value: "6", ids: "Other" }];
    }

//definition for Sec1
self.Sec1 = ko.observableArray([new RowData1()]);

//some function which will add the new row with values
function addData(){
    self.Sec1.push(RowData1(result.IDS, result.Comment));}//result has the IDS value and comment from an ajax call

HTML:
<table id="1Table" class="table table-bordered">
                <thead>
                    <tr>
                        <th style="width: 22px;"><button class="btn btn-xs btn-primary" type="button" data-bind=" click: $root.Sec1_AddRow">Add</button></th>
                        <th style=" text-align:center"><b>Irrigation Delivery System</b></th>
                        <th style=" text-align:center"><b>Comments</b></th>
                    </tr>
                </thead>

                <tbody data-bind="foreach:Sec1">
                    <tr>
                        <td>
                            <button class="btn btn-xs btn btn-danger" type="button" data-bind="click: $root.Sec1_RemoveRow">Remove</button>
                        </td>
                        <td>
                            <select class="form-control" data-bind="options: IDS, value: IDS ,optionsValue:'value', optionsText:'ids'"></select>
                        </td>
                        <td>
                            <textarea class="form-control" maxlength="500" style="width:50%" data-bind="value: Comments"></textarea>
                        </td>

                    </tr>
                </tbody>
            </table>

A:

you need something like this
ViewModel
   function RowData(ids, comments) {
       var self = this;

       self.comments = ko.observable(comments).extend({
           required: true
       });
       self.ids = ko.observable(ids);
   }

   var Vm = function () {
       var self = this;
       //definition for Sec1
       self.Sec1 = ko.observableArray([]);
       self.selectedIDS = ko.observable();
       self.comment = ko.observable();

       //some function which will add the new row with values
       self.addRow = function () {
           self.Sec1.push(new RowData(self.selectedIDS(), self.comment()));
       }; //result has the IDS value and comment from an ajax call
       self.removeRow = function (item) {
           self.Sec1.remove(item);
       };

       self.IDS = ko.observableArray([{
           value: "0",
           ids: "Choose..."
       }, {
           value: "1",
           ids: "Drip"
       }, {
           value: "2",
           ids: "Flood - Ditch"
       }, {
           value: "3",
           ids: "Flood - Gated Pipe"
       }, {
           value: "4",
           ids: "Pivot"
       }, {
           value: "5",
           ids: "Sprinkler"
       }, {
           value: "6",
           ids: "Other"
       }]);

   };
   ko.applyBindings(new Vm());

View
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="ids" class="col-sm-2 control-label">Irrigation Delivery System</label>
        <div class="col-sm-10">
            <select id="ids" class="form-control" data-bind="options: IDS, value: selectedIDS, optionsText:'ids'"></select>
        </div>
    </div>
    <div class="form-group">
        <label for="comment" class="col-sm-2 control-label">Comment</label>
        <div class="col-sm-10">
            <textarea class="form-control" maxlength="500" data-bind="value: comment"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary" data-bind="click: addRow">Add</button>
        </div>
    </div>
</form>
<table id="1Table" class="table table-bordered">
    <thead>
        <tr>
            <th style="width: 22px;"></th>
            <th style=" text-align:center">
                <b>Irrigation Delivery System</b>

            </th>
            <th style=" text-align:center">
                <b>Comments</b>

            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach:Sec1">
        <tr>
            <td>
                <button class="btn btn-xs btn btn-danger" type="button" data-bind="click: $parent.removeRow">Remove</button>
            </td>
            <td data-bind="text: ids().ids">

            </td>
            <td ><p data-bind="text: comments"></p>
            </td>
        </tr>
    </tbody>
</table>

jsFiddle Demo

