Изменение выбора выпадающего списка

Question

Привет, друзья! Я пытаюсь использовать knockoutjs на одной из моих веб-страниц в mvc razor. Из следующего ViewModel я достигаю функциональности "ДОБАВИТЬ БОЛЬШЕ". Но моя проблема в том, как мы можем добиться следующих функциональных возможностей:

(1) Второе раскрывающееся меню должно быть невидимым, если в раскрывающемся списке "Тип табака" выбрано "Выбрать..."

(2) Когда мы выбираем какое-то другое значение (кроме "Выбрать"), должен быть заполнен второй выпадающий список, содержащий значения от 1 до 10....

(3) Когда мы выбираем "Другие" вместо выпадающего, должно появиться текстовое поле

ЗДЕСЬ МОЯ ПОПЫТКА:

<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

Мне сложно догадаться, чего вы пытаетесь достичь. Но я думаю, что вы ищете видимую привязку в нокауте.

Видимая привязка приводит к тому, что связанный элемент DOM становится скрытым или видимым в соответствии со значением, которое вы передаете привязке.

И второе, думаю, должно быть optionsCaption подпадает под варианты привязки.

Если вы используете optionsCaption с привязкой параметров, то ko добавит дополнительную опцию в список выбора, которая будет выбрана по умолчанию и содержит значение undefined.

Используя это, я создаю скрипку в соответствии с вашими требованиями. Проверь это:

Демо скрипка

Надеюсь, это то, что вы ищете!