javascript - Binding data with dropdown -

i making application there 2 drop down's , 1 text box.there json data want bind.i able bind dropdown i.e on change on first drop down value of second drop down changing.the problem not able bind data text field.can body me?

the code reference html

<select data-bind="options: financialyear,value: animaltypea, optionstext: 'description',optionsvalue: 'value'"> </select> <select data-bind="options: animalsfortype,value: animaltype, optionstext: 'description',optionsvalue: 'value'"></select>   <input type="text" data-bind="value: subject" /> 

and js code

response.invocationresult.customerrequestmasterdetailbeans.foreach(function (item1) {   if(item1.key == "") {     self.financialyear.push(item1);   } });  self.financialyear = ko.observablearray([]); self.animaltypea = ko.observable();  self.financialyeara = ko.observablearray([]); self.animaltypea = ko.observable();  self.animaltype = ko.observable();  self.subject = ko.observable();  self.animalsfortype = ko.computed(function () {   var selectedtype = self.animaltypea();    return !selectedtype ? [] : response.invocationresult.customerrequestmasterdetailbeans.filter(function (data) {     return data.key == selectedtype;   }); });  self.subject = ko.computed(function () {   var selectedtype = self.animaltype();   return !selectedtype ? [] : response.invocationresult.customerrequestmasterdetailbeans.filter(function (data) {      return data.subjectmessage == selectedtype;   });  }); 

and reference json is

{     "customerrequestmasterdetailbeans": [         {             "requestmessage": "",             "subjectmessage": "",             "description": "documentrequest",             "value": "dr",             "formatmessage": "",             "servicecharge": "",             "key": ""         },         {             "requestmessage": "aservicechargeofrs50.00perstatementrequestwillbeapplied.doyouwanttoproceed?",             "subjectmessage": "hardcopyofstatementofaccount",             "description": "statementofaccount",             "value": "sdr",             "formatmessage": "pleasesendmeahardcopyofupdatedstatementofaccountatmyregisteredaddress.",             "servicecharge": "rs50.00",             "key": "dr"         },         {             "requestmessage": "aservicechargeofrs50.00perstatementrequestwillbeapplied.doyouwanttoproceed?",             "subjectmessage": "hardcopyofforeclosuresimulation",             "description": "foreclosuresimulation",             "value": "fcdr",             "formatmessage": "pleasesendmeahardcopyofupdatedforeclosuresimulationatmyregisteredaddress.",             "servicecharge": "rs50.00",             "key": "dr"         }     ] } 

actually trying display document request in first drop down , statement of account , foreclosure simulation in second drop down.now if second drop down populated statement of account text box should display statement of account , if foreclosure simulation hard copy of foreclosure simulation.

from can see, problem due binding value of input computed value, should depend on values of view-model , shouldn't editable.

i suggest use text binding instead of value binding , using span or div instead of input explained @ http://knockoutjs.com/documentation/computedobservables.html.

<span data-bind="text: subject"></span> 

if want able edit value of subject in input node, (you might want able change selection typing different here) use writable observable tell knockout want when type value there (great explanation @ http://knockoutjs.com/documentation/computed-writable.html).