1

在我的水疗中心，我正在使用敲除 js 将数据从 api 绑定到成功选择选项。

代码：

<select id="ddlClassificationPosition" name="" data-theme="c" data-bind="options: ClassificationPositionData, optionsValue: 'ClassificationPositionID', optionsText: function (i) { return i.Classification + ':' + i.Position },selectedOptions: SelectedItems, optionsCaption: 'Choose..'">
 <option value="0">
     Choose..
 </option>               
</select>

 self.SelectedItems= ko.observableArray([]);
  var vm = {
        ClassificationPositionData: ko.observableArray(positionData),
        ClassificationPositionID: ko.observable(),
        SelectedItems: ko.observableArray([])
    };

但是在单击刷新按钮时，我想将所选选项更改为默认文本“选择..”。我在按钮单击中编写了下面给出的代码。

 <a data-role="button" data-transition="slide" href="#page3" data-icon="arrow-r"
              data-iconpos="right" data-bind="event: { click: btnAddContactLink }">
                 Sample
              </a>
self.btnAddContactLink = function () {
   self.SelectedItems.removeAll();
}

单击刷新按钮后，它不会更改文本。但是，如果我单击该下拉菜单，则它会显示“选择..”作为所选选项，如下所示。 在此处输入图像描述

我不知道我在哪里犯错了。请朋友帮帮我

4

4 回答 4

0

不要像那样使用 jQuery 来操作 DOM。尝试直接操作视图模型，让 Knockout 为您处理 UI 更新。您需要使用selectedOptions绑定来执行此操作。

假设这个视图模型：

var vm = {
    ClassificationPositionData: ko.observableArray([i1, i2]),
    ClassificationPositionID: ko.observable(),
    SelectedItems: ko.observableArray([])
};

您可以将select'更改data-bind为以下内容：

<select id="ddlClassificationPosition" name="" data-theme="c" 
        data-bind="options: ClassificationPositionData, 
                   optionsValue: 'ClassificationPositionID', 
                   optionsText: function (i) { return i.Classification + ':' + i.Position }, 
                   selectedOptions: SelectedItems,
                   optionsCaption: 'Choose..'">
</select>

这会将所选项目绑定到您的视图模型中的可观察对象。然后使用以下方法刷新并重置为基本选项：

vm.refresh = function() { vm.SelectedItems.removeAll(); };

在这个小提琴中看到所有这些。

optionPS：如果你也有一个绑定，我认为你不需要显式元素optionsCaption。

于 2013-08-19T09:08:19.797 回答
0

changeDefaultText 用所选值替换默认文本。

JS

var vm = {
    selected :  ko.observable(), 
    items : ['a', 'b', 'c'],
    defaultText:  ko.observable('Default text'),
    changeDefaultText : function(){
        vm.defaultText(vm.selected());
    }
};

ko.applyBindings(vm);

看法 

<select  data-bind="options: items, optionsCaption: defaultText, value : selected"></select>

<button data-bind="click : changeDefaultText">ChangeDefaultText</button>

见小提琴

我希望它有所帮助。

于 2013-08-19T09:09:25.510 回答
0

只需将您绑定<select>到可观察变量并将其值设置为 null 即可取消选择任何项目。

<select id="ddlClassificationPosition" name="" data-theme="c" data-bind="options: ClassificationPositionData, value: selectedPosition, optionsValue: 'ClassificationPositionID', optionsText: function (i) { return i.Classification + ':' + i.Position }, optionsCaption: 'Choose..'"></select>

<button data-bind="click: function(){ $root.selectedPosition(null); }">Reset</button>

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

于 2013-08-19T09:13:52.387 回答
0

单选按钮代码：

  <input id="radio1" name="rbtnShift" value="1" data-theme="c" type="radio">

在刷新按钮点击，请写如下：

  $("input[type='radio']").checkboxradio();
  $("input[name^='rbtnShift']").attr("checked", false).checkboxradio("refresh");
于 2013-09-06T10:26:15.690 回答