在淘汰赛js中，单击按钮时选择中的文本没有改变？

Question

在我的水疗中心，我正在使用敲除 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();
}

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

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

Answer 1

不要像这样使用 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>

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

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

在this fiddle 中查看所有这些工作。

PS：如果您还具有 optionsCaption 的绑定，我认为您不需要显式的 option 元素。

Answer 2

只需将您的 <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/

Answer 3

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>

See fiddle

希望对你有帮助。

Answer 4

单选按钮代码：

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

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

  $("input[type='radio']").checkboxradio();
  $("input[name^='rbtnShift']").attr("checked", false).checkboxradio("refresh");