knockout bind text label to dropdown value selected option text

2 回答

• 24

  我正在寻找类似的功能，我昨天一起扔的东西，但找不到它，所以我最终只是改变了我在值属性中存储的东西 . 有时这是最简单的解决方案 .

  这是使用jQuery解决问题的快速而又简单的解决方案：

  HTML

  <div data-bind="text: dropdownText"></div>
  <select data-bind="value: dropdownValue" id="dropdown">
    <option value="1">Value1</option>
    <option value="2">Value2</option>
  </select>
  

  JS

  function ViewModel() {
      var self = this;
      this.dropdownValue = ko.observable();
      this.dropdownText = ko.computed(function() {
          return $("#dropdown option[value='" + self.dropdownValue() + "']").text();
      });
  };
  
  ko.applyBindings(new ViewModel());
  

  实例：http://jsfiddle.net/5PkBF/

  如果您希望在多个位置执行此操作，最好编写自定义绑定，例如：

  HTML

  <div data-bind="text: dropdownValue"></div>
  <select data-bind="selectedText: dropdownValue">
    <option value="1">Value1</option>
    <option value="2">Value2</option>
  </select>
  

  JS

  ko.bindingHandlers.selectedText = {
      init: function(element, valueAccessor) {
          var value = valueAccessor();
          value($("option:selected", element).text());
  
          $(element).change(function() {
              value($("option:selected", this).text());
          });
      },
      update: function(element, valueAccessor) {
          var value = ko.utils.unwrapObservable(valueAccessor());
          $("option", element).filter(function(i, el) { return $(el).text() === value; }).prop("selected", "selected");
      }
  };
  
  function ViewModel() {
      this.dropdownValue = ko.observable();
  };
  
  ko.applyBindings(new ViewModel());
  

  实例：http://jsfiddle.net/5PkBF/1/

  回复于 2024-05-19T03:43:14+08:00
• 3

  这就是我实现类似功能的方式 . 我在我的模型中定义了一个名为'dropDownValue'的observable . 我还有一个名为'dropDownValues'的可观察数组 . 我的HTML看起来像：

  <span data-bind="text: dropDownValue"></span>
  <select data-bind="options: dropDownValues, optionsValue: 'FieldText', optionsText: 'FieldText', value: dropDownValue"></select>
  

  请注意，我对optionValues和optionsText使用了相同的字段（在这种情况下，确定不确定optionsText） . 在我的特定应用程序'dropDownValue'是在其他地方预先填充的，所以当我打开一个带有上面选择的对话框时我希望它默认为先前填充的值，并且还绑定它以便如果用户更改它，我可以在数据库中反映出这种变化 .

  回复于 2024-05-19T03:43:14+08:00