当选择的值随敲击而改变时调用函数

时间:2014-04-04 10:14:56

标签: jquery knockout.js

我有两个选择,第二个取决于第一个 我想使用knockout来检查第一个选择的值是否改变,调用一个带有ajax-call的函数填充第二个选择。 第一个选择是填充服务器端

    $(document).ready(function () {
        function FilterModel() {
            this.Datevalue = ko.observable();

            this.addSecond = function() {
                   ---
            }

        }

        $(function () {
            ko.applyBindings(new FilterModel());
        });
    });

html

<select id="fisrt" data-bind="value: Datevalue" ></select>
<select id="second" ></select>

我怎样才能调用addSecond函数?

2 个答案:

答案 0 :(得分:1)

您可以使用计算的布尔值来验证Datevalue并使用visible:绑定来显示第二个<select>

http://jsfiddle.net/t8gxv/

要调用addSecond,您可以订阅observable并在值更改时调用addSecond

http://jsfiddle.net/t8gxv/1/

  $(document).ready(function () {
    function FilterModel() {
        var self = this;

        this.Datevalue = ko.observable();
        this.addSecond = function() {
              alert('addSecond');
        }

        // boolean for showing the second select
        this.showSecond = ko.computed(function() {
           return  this.Datevalue() == 'bar';
        }, this);

        // calling addSecond when the correct value is selected
        this.Datevalue.subscribe(function(newValue) {
            if(newValue == 'bar') {
              self.addSecond();   
            }
        });

        // easier even is to subscribe to the computed
        var subscription = this.showSecond.subscribe(function(newValue) {
            // if true
            if(newValue) {
              self.addSecond();   

              //only want to call addSecond once
              subscription.dispose();
            }
        });

    }

    $(function () {
        ko.applyBindings(new FilterModel());
    });
});

也可以订阅计算并处理订阅,因此addSecond只会被调用一次: http://jsfiddle.net/t8gxv/2/

答案 1 :(得分:0)

JAVASCRIPT:
this.Datevalue = ko.observable();
this.MakeSecondVisible = ko.observable(); 
this.ondropDownChange= function() {
      if(this.Datevalue() == something)
      {
            this.MakeSecondVisible = true;
      }


HTML : 

<select data-bind="value: Datevalue" onclick: ondropDownChange() > //FIRST ONE

<select data-bind="options: optionValues"  visible: MakeSecondVisible > //SECOND ONE