Select list not working with optionsCaption in Knockout

Question

Whenever I put optionsCaption property the data doesn't bind otherwise it works very well and binds the other three valules according to the selected value of the drop down. ExpenseIO is the model , PlantList is an observable array. PlantDescription,PlantCode,CompanyCode and CompanyDescription have been defined under the MasterModel.js . Please help.

<div>
     <span>Plant</span>
       <span>
          <select data-bind="options:$root.ExpenseIO.PlantList,
                         optionsText: 'PlantDescription',
                         optionValue:'PlantCode',
                         value: ExpenseIO.SelectedPlant,
                         optionsCaption: 'Select Plant'
                         " style="width: 180px" required="required" ></select>
         <span class="error">*</span></span>
         <span>
         <input id="plantCode" required="required" data-bind="value:$root.ExpenseIO.SelectedPlant().PlantCode" readonly="true" class="readOnlyField" style="width: 82px" /><span class="error">*</span></span>
         <span>Company</span>
         <span>
               <input id="companyCode" required="required" data-bind="value:ExpenseIO.SelectedPlant().CompanyCode" readonly="true" class="readOnlyField" style="width: 82px" /><span class="error">*</span></span>
         <span>
         <input id="companyDesc" required="required" data-bind="value:ExpenseIO.SelectedPlant().CompanyDescription" readonly="true" class="readOnlyField" style="width: 220px" /><span class="error">*</span></span>
</div>

can you reproduce your issue in fiddle so it's easy for us to figure out what going wrong . cheers — super cool

Jenish Rabadiya Jenish Rabadiya · Accepted Answer · 2015-02-17T07:26:05

I am not much sure whether this cause the issue or not but You need to mention optionsValue instead of optionValue

so update your code like following:

<select data-bind="options:$root.ExpenseIO.PlantList,
                         optionsText: 'PlantDescription',
                         optionsValue:'PlantCode',
                         value: ExpenseIO.SelectedPlant,
                         optionsCaption: 'Select Plant'
                         " style="width: 180px" required="required" ></select>

Look at knockout documentation for more information here.

And I hope ExpenseIO.SelectedPlant with which value of select is bind to also exists in that context because you have mentioned $root.ExpenseIO.SelectedPlant while binding with options.

Select list not working with optionsCaption in Knockout

1 Answers