如何获取下拉列表的选定值？答案

【问题标题】：How to get selected value of a dropdown?如何获取下拉列表的选定值？
【发布时间】：2014-07-04 14:47:02
【问题描述】：

我正在尝试获取下拉列表的选定值，但我的代码不起作用。

这里JsFiddle

查看

<select style="height: 26px;" data-bind="options: StateTitle, 
        event: { change: ddlState }, optionsText: 'StateText', 
        optionsValue: 'StateId', value: selectedState, 
        optionsCaption: 'Choose State.....'"></select>

视图模型

function AppViewModel() {
    var self = this;
   self.StateTitle = ko.observableArray([]);
self.selectedState = ko.observable();
    var data = {
        StateId:1,
        StateText:'Demo'

    }
    self.StateTitle(data);

      self.ddlState = function (newValue) {
        alert("State Id " + ko.toJSON(newValue.StateId));
    }
}

  ko.applyBindings(new AppViewModel());

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-4 knockout.js knockout-2.0

【解决方案1】：

我认为您的更改事件过于复杂了。您可以只引用您拥有的 observable：selectedState，您的 select 将 StateId 的值传递给它更改时：

Sample JSFiddle

标记：

<select style="height: 26px;" 
        data-bind="options: StateTitle, 
                   optionsText: 'StateText', 
                   optionsValue: 'StateId', 
                   value: selectedState, 
                   optionsCaption: 'Choose State.....'">
</select>

<p data-bind="text: selectedState"></p>

淘汰赛

function AppViewModel() {
    var self = this;
    self.StateTitle = ko.observableArray([{
        'StateId': 1,
        'StateText': 'Demo'
    }, {
        'StateId': 2,
        'StateText': 'Another'
    }]);
    self.selectedState = ko.observable();
}

ko.applyBindings(new AppViewModel());

要创建警报，只需订阅 observable：

Updated Fiddle

self.selectedState.subscribe(function(item) {
    alert('Selected State Id:' + item);
});

【讨论】：

未捕获的类型错误：无法读取未定义的属性“订阅”
该错误显示在哪里？在小提琴或您的代码中？
@Subhash 你把subscribe 函数放在self.selectedState 的声明之后吗？如果你在声明和设置 observable 之前编写 subscribe 函数，你会得到这个错误。

【解决方案2】：

您需要像这样订阅selectedState：

self.selectedState.subscribe(function (data) {
        console.log(data)
    });

现在这将在下拉选择更改时跟踪StateId。

UPDATED FIDDLE

【讨论】：

我的页面显示此错误“未捕获的类型错误：无法读取未定义的属性'订阅'”
由于您看到错误，您正在做一些错误，它在小提琴中工作，所以它应该在您的页面上工作
你把它放在哪里了？
订购和放置很重要，它应该在我放置小提琴的地方

【解决方案3】：

function AppViewModel() {
    var self = this;
   self.StateTitle = ko.observableArray();
self.selectedState = ko.observable();
    var data = {
        StateId:1,
        StateText:'Demo'

    }
    self.StateTitle.push(data);

      self.ddlState = function () {
        alert("State Id " + self.selectedState().StateId);
    }
}

【讨论】：

Uncaught ReferenceError: selectedState is not defined
已编辑答案，它应该是 self.selectedState().StateId ，self。很重要，现在试试，如果有效，标记为答案。
现在它显示：Uncaught TypeError: Cannot read property 'StateId' of undefined
请先在fiddle中试一试

【解决方案4】：

你只需要加一点检查，http://jsfiddle.net/29u4X/

self.selectedState.subscribe(function(newValue) {
    //check if nothing is been selected
    if (typeof (newValue) === 'undefined' || newValue === '') {
        return;
    }
    //Do want ever you want to do
    alert(newValue);
});

【讨论】：