Question

我有各种图像类别的下拉列表：

<select class="form-control" data-bind="options: imageCategoryList, value: 'Category', optionsCaption: --Select Category--, optionsText: 'Category', optionsValue: 'Category', event: {change: GetImages}" id="Category" name="Category"></select>

在我的Javascript中，我试图获取该下拉菜单中所选内容的文本值，但我不知道该怎么做。在我的viewModel中，我有

var img = self.imageCategoryList().Text

但只返回“undefined”。如何获取所选文本值？

提前致谢！

Answer 1

您应该将所选选项绑定到observable。你在模型中创建：

self.selectedCategory = ko.observable();

并在您的选择中

<select class="form-control" data-bind="options: imageCategoryList, value: selectedCategory, optionsCaption: --Select Category--, optionsText: 'Category', optionsValue: 'Category', event: {change: GetImages}"  id="Category" name="Category"></select>

在您的javascript中，您可以像

一样访问它

var img = modelObject.selectedCategory();

这未经过测试，但它已经开始了。

Answer 2

我认为这可能是你在这里想要完成的......

工作小提琴：http://jsfiddle.net/bPP5Q/33/

观点......

<select class="form-control" data-bind="
  options: imageCategoryList,
  value: selectedCategory,
  optionsCaption: '--Select Category--',
  optionsText: function(item){ return item.Category },
  event: {change: getImages}"
id="Category" name="Category"></select>

和viewmodel ...

jQuery(function ($) {
  // this runs after the window loads
  var ViewModel = function (data) {
    var self = this;

    self.imageCategoryList = ko.observableArray([
      {
        Category: 'A',
        Text: 'CategoryA'
      },
      {
        Category: 'B',
        Text: 'CategoryB'
      },
      {
        Category: 'C',
        Text: 'CategoryC'
      }
    ]);

    self.selectedCategory = ko.observable();

    self.selectedCategory.subscribe(function(newValue) {
        console.log(newValue.Text);
    });

    self.getImages = function(){};
  }


  var vm = new ViewModel();

  ko.applyBindings(vm);

});

从Knockout下拉列表中获取文本值

2 个答案: