I am using
Knockout in a MVVM single page app environment and am trying to create a
dropdown list using a knockout select. I'd like to be able to BOTH:
1)
individually make items in the options list visible which I
have accomplished using a <select> and then a knockout
containerless ko: foreach around my <options> element like this:
<select
class="selectpicker" show-tick data-bind="attr:{name: categoryTypeName,
id: categoryTypeName, title: categoryTypeName, dataIndex:$index},
event:{change:onChange}">
<!--ko foreach: categories -->
<option data-bind="value: categoryID, text: name, visible:IsVisible"></option>
<!--/ko-->
</select>
AND
2)
have a selected value from an arbitrary JavaScript object which I have
accomplished using options, optionsText, optionsValue and value defined
in my select element like this:
<select id="inputCategory"
data-bind="attr: {name: categoryTypeName, id: categoryTypeName, title:
categoryTypeName, dataIndex:$index}, options:
$root.visibleCategories(), optionsText: 'name',
optionsValue:'categoryID', value: $root.selectedCategoryId()[$index()], event: {change: $root.onCategoryChange } " >
</select>
Both of these work on their own , but they use different select element structure. I'd
like to do both but can't figure out how to both individually apply
visibility to items in my options list AND have the select format that
enables me to define a selected value.
Is there a way to do both of these together?