Question

如何创建依赖选择。

    <select class="form-control" id="tf" name="tf" data-bind="value: tf">
        <option value="st">Standart</option>
        <option value="ht">High</option>
    </select>

    <select class="form-control" id="tt" name="tt" data-bind="value:tt">
.....
</select>

如果一个选择值== st，则显示以下值：

<option>75</option> 
<option>85</option>

如果一个选择值== ht，则显示：

<option>100</option> 
    <option>120</option>

Answer 1

我使用过滤后的数组作为第二个选择选项。运行下面的代码段。（如果您没有选择第一个选择，我会向他们展示所有内容，但如果不是您想要的话，您可以更改该行为）

function vm() {
  var self = this;
  this.tfOptions = ko.observableArray([{
    'name': 'Standart',
    'value': 'st'
  }, {
    'name': 'High',
    'value': 'ht'
  }]);
  this.tf = ko.observable('');
  this.optionsTwo = ko.observableArray([{
      'tf': 'st',
      'value': '75'
    },
    {
      'tf': 'st',
      'value': '85'
    },
    {
      'tf': 'ht',
      'value': '100'
    },
    {
      'tf': 'ht',
      'value': '120'
    }
  ]);
  
  this.selectedOptionTwo = ko.observable('');

  this.filteredoptionsTwo = ko.computed(function() {
    var filter = this.tf();
    if (!filter) {
      return null;
    } else {
      return ko.utils.arrayFilter(this.optionsTwo(), function(item) {
        return item.tf === filter.value;
      });
    }
  }, this);

}



var mymodel = new vm();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> Options 1: <select class="form-control" id="tf" name="tf" data-bind="options: tfOptions,
                    optionsText: 'name',
                    value: tf,
                    optionsCaption: 'Choose...'">
       
  </select> Options2: <select class="form-control" data-bind="options: filteredoptionsTwo,
                    optionsText: 'value',
                    value: selectedOptionTwo
                    optionsCaption: 'Choose...'"></select>
                    
<p data-bind="with: tf">
   for Select One You have selected: <span data-bind="text: name"> </span>,
 <span data-bind="text: value"> </span></p>
 
 <p data-bind="with: selectedOptionTwo">
   for Select Two You have selected: <span data-bind="text: value"> </span>,
 </p>

依赖选择Knockout

1 个答案: