knockout js observable is showing undefined value

Question

I have created following code in my page. I am using knockout code. If you need more details please let me know.

My question is from below two dropdown one is setting value to SelectedSeatBlockId while other element is not able to set the value. When I am retrieving the same value in function to process, I am able to retrive value for self.SelectedSeatBlockId()

please help me.. I know the code I have provided is very less. Let me know if you need more details.

.js file code

    self.SeatBlockTitleList = ko.observableArray();
    self.SelectedSeatBlockId = ko.observable();
    self.SeatRowTitleList = ko.observableArray();
    self.SelectedSeatRowId = ko.observable();

.html file code

<select class="form-control input-sm" id="" size="1" data-bind="event:{click: SeatPlanModel.GetSeatRowDropDown()}, options:  SeatPlanModel.SeatBlockTitleList ,optionsValue:'Value',optionsText:'Text', value:  SeatPlanModel.SelectedSeatBlockId, optionsCaption: 'Choose Seat Block Title...'"></select>
<select class="form-control input-sm" id="" size="1" data-bind="event:{click: SeatPlanModel.GetSeatRecords()},options:  SeatPlanModel.SeatRowTitleList, optionsValue:'Value',optionsText:'Text', value:  SeatPlanModel.SelectedSeatRowId, optionsCaption: 'Choose Seat Block Title...'"></select>

Answer 1

Not sure if having click event on select is a good idea. If you just want to get the value of the observable, then you can just read the observable directly.

With your example make sure that both observables are set, I imagine it looks something like that:

 var DemoPage = (function() { function DemoPage() { var self = this; self.SeatBlockTitleList = ko.observableArray([{ Value: 1, Text: 'One' }, { Value: 2, Text: 'Two' }, { Value: 3, Text: 'Three' }]); self.SelectedSeatBlockId = ko.observable(''); self.SeatRowTitleList = ko.observableArray([{ Value: 'R1', Text: 'Row One' }, { Value: 'R2', Text: 'Row Two' }, { Value: 'R3', Text: 'Row Three' }]); self.SelectedSeatRowId = ko.observable(''); self.GetSeatRowDropDown = function() { console.log(self.SelectedSeatBlockId()); }; self.GetSeatRecords = function() { console.log(self.SelectedSeatRowId()) }; } return DemoPage; })(); var demo = new DemoPage(); ko.applyBindings(demo); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <select class="form-control input-sm" id="" size="1" data-bind="event:{click: GetSeatRowDropDown()}, options: SeatBlockTitleList ,optionsValue:'Value',optionsText:'Text', value: SelectedSeatBlockId, optionsCaption: 'Choose Seat Block Title...'"></select> <select class="form-control input-sm" id="" size="1" data-bind="event:{click: GetSeatRecords()},options: SeatRowTitleList, optionsValue:'Value',optionsText:'Text', value: SelectedSeatRowId, optionsCaption: 'Choose Seat Block Title...'"></select> <p>SelectedSeatBlockId: <span data-bind="text: SelectedSeatBlockId"></span> </p> <p>SelectedSeatRowId: <span data-bind="text: SelectedSeatRowId"></span> </p> 

But it also would work without the click events:

 var DemoPage = (function() { function DemoPage() { var self = this; self.SeatBlockTitleList = ko.observableArray([{ Value: 1, Text: 'One' }, { Value: 2, Text: 'Two' }, { Value: 3, Text: 'Three' }]); self.SelectedSeatBlockId = ko.observable(''); self.SeatRowTitleList = ko.observableArray([{ Value: 'R1', Text: 'Row One' }, { Value: 'R2', Text: 'Row Two' }, { Value: 'R3', Text: 'Row Three' }]); self.SelectedSeatRowId = ko.observable(''); } return DemoPage; })(); var demo = new DemoPage(); ko.applyBindings(demo); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <select class="form-control input-sm" id="" size="1" data-bind="options: SeatBlockTitleList ,optionsValue:'Value',optionsText:'Text', value: SelectedSeatBlockId, optionsCaption: 'Choose Seat Block Title...'"></select> <select class="form-control input-sm" id="" size="1" data-bind="options: SeatRowTitleList, optionsValue:'Value',optionsText:'Text', value: SelectedSeatRowId, optionsCaption: 'Choose Seat Block Title...'"></select> <p>SelectedSeatBlockId: <span data-bind="text: SelectedSeatBlockId"></span> </p> <p>SelectedSeatRowId: <span data-bind="text: SelectedSeatRowId"></span> </p>