Drop down menu 淘汰下拉选择更改

Drop down menu 淘汰下拉选择更改,drop-down-menu,knockout.js,razor-2,Drop Down Menu,Knockout.js,Razor 2,嗨,朋友们,我正在尝试在mvc中的一个网页上使用knockoutjs 剃须刀从下面的视图模型中,我实现了“添加更多” 但我的问题是,我们如何实现以下目标 功能: (1) 第二个下拉列表应不可见 “烟草类型”选择为“选择…” (2) 当我们选择其他值时(除了“选择”)秒 应填充包含值1到10的下拉列表 (3) 当我们选择“其他人”而不是下拉时,应该显示一个文本框 出现 以下是我的尝试: 年。 @**@ 消费的烟草/尼古丁类型: 数量: 频率: 添加新的 函数setconsumption(名称、i

嗨,朋友们,我正在尝试在mvc中的一个网页上使用knockoutjs 剃须刀从下面的视图模型中,我实现了“添加更多” 但我的问题是,我们如何实现以下目标 功能:

(1) 第二个下拉列表应不可见 “烟草类型”选择为“选择…”

(2) 当我们选择其他值时(除了“选择”)秒 应填充包含值1到10的下拉列表

(3) 当我们选择“其他人”而不是下拉时,应该显示一个文本框 出现

以下是我的尝试:


年。
@**@
消费的烟草/尼古丁类型:
数量:
频率:
添加新的
函数setconsumption(名称、initdrug、initfrequency){
var self=这个;
self.Name=名称;
自身药物=可观察的ko(初始药物);
自我频率=可观察到的ko(初始频率);
self.FormatPrice=ko.computed(函数(){
返回self.Drug().Price?”$“+self.Drug().Price.toFixed(2):“无”;
});
}
函数消耗ViewModel(){
var self=这个;
self.availabledrugs=[{“DrugName”:“Choose…”,“Price”:0},
{“药名”:“香烟”,“价格”:10},
{“DrugName”:“雪茄”,“价格”:20},
{“药品名称”:“其他”,“价格”:30}];
self.availablefrequency=[{“frequency”:“Choose…”},{“frequency”:“freq1”},{“frequency”:“freq2”}];
self.seats=ko.array(
[新设置消耗(“,self.availabledrugs[0],self.availablefrequency[0]));
self.AddConsumption=函数(){
self.seats.push(新设置消耗(“,self.availabledrugs[0],self.availablefrequency[0]);
};
}
应用绑定(新的ConsumptionViewModel());

我很难猜到你想要实现什么。但我认为你在寻找淘汰赛

可视绑定会根据传递给绑定的值使关联的DOM元素变得隐藏或可见

第二个想法应该是
选项标题下的

如果将选项标题与选项绑定一起使用,ko将在选择列表中预先添加一个额外选项,默认情况下,该选项将被选中,并且包含未定义的值

通过使用这两者,我已经创建了一个小提琴根据您的要求。选中此项:


希望这就是你要找的

答案并不中肯,但我得到了提示…而且它起作用了…谢谢老兄。。。。。
<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>