knockout dropdown selection change

Question

Hi Friends i am trying to use knockoutjs on one of my web pages in mvc razor. From the following ViewModel i am achieving the "ADD MORE" functionality.But My Problem is that how can we achieve the following functionality:

(1) The second dropdown should be invisible when the dropdown for "Type of Tobacco" is selected to "Choose..."

(2)When we choose some other value (other than "Choose") second dropdown should be populated containing value 1 to 10....

(3) When we select "Others" instead of drop down a textbox should appear

HERE IS MY ATTEMPT:

<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>

<script type="text/html" id="ddlSelection">
<div><select></select> yrs.</div>
<div><input type="text" data-bind=""></input></div>
</script>

<div id="container">
  @*<div data-bind="template:{name:'smoker'}"></div>*@
  <table cellpadding="3" cellspacing="4">
    <tbody data-bind="foreach: seats">
        <tr>
            <td>
                Type of Tobacco/Nicotine consumed :
            </td>
            <td>
                <select data-bind="options: $root.availabledrugs, value: Drug, optionsText: 'DrugName'"></select> 
            </td>
            <td><select></select></td>
        </tr>
        <tr>
            <td>
                Quantity : <input data-bind="value: Name" /> 
            </td>
            <td>
                Frequency : <select data-bind="options: $root.availablefrequency, value: Frequency, optionsText: 'frequency'"></select>
            </td>
            <td data-bind="text: FormatPrice"></td>
        </tr>
    </tbody>
</table>
<button data-bind="click:AddConsumption">Add New One</button>
</div> 


<script type="text/javascript">
    function setconsumption(name, initdrug,initfrequency) {
        var self = this;
        self.Name = name;
        self.Drug = ko.observable(initdrug);
        self.Frequency = ko.observable(initfrequency);
        self.FormatPrice = ko.computed(function () {
            return self.Drug().Price ? "$" + self.Drug().Price.toFixed(2) : "none";
        });
    }

    function ConsumptionViewModel() {
        var self = this;
        self.availabledrugs = [{ "DrugName": "Choose...", "Price": 0 },
                               { "DrugName": "Cigarettes", "Price": 10 },
                               { "DrugName": "Cigar", "Price": 20 },
                               { "DrugName": "Others", "Price": 30}];

        self.availablefrequency = [{ "frequency": "Choose..." }, { "frequency": "freq1" }, { "frequency": "freq2"}];

        self.seats = ko.observableArray(
                                        [new setconsumption("", self.availabledrugs[0], self.availablefrequency[0])]);

        self.AddConsumption = function () {
            self.seats.push(new setconsumption("", self.availabledrugs[0], self.availablefrequency[0]));
        };
    }

    ko.applyBindings(new ConsumptionViewModel());
</script>

Answer 1

Its hard to guess for me that what you are trying to achieve. But i think you are looking for visible binding in knockout.

The visible binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding.

And second think should be the optionsCaption comes under options binding.

If you use optionsCaption with options binding than ko will prepend an extra option in the select list, which will be selected by default and contains value undefined.

By using this both i have create a fiddle according to your requirement. Check this:

Demo fiddle

Hope this is what you are looking for!