JQuery&JS&BootStrap

Knockout自学解惑——select

2018-09-19  本文已影响1人  哈哈乐乐WXT

最近自学了一下knockout,在绑定select控件时遇到一点小麻烦,终于解决了(马虎马虎不得···)。

问题描述:

实现下拉列表绑定,同时获取选择值。这个下拉列表是顺利绑定了,但是选中的值怎么也获取不到。用knockout绑定好了列表,如果用jq的方式是可以顺利获取到当前选中的值的,不过这种方式是有点太傻了;既然学习了knockout,而且这个框架又不依赖jq,那能用一个解决就不应该再用其他的什么框架了。

最终解决方法:

原来是我将绑定列表的一个属性写错了,正常情况下绑定选中的列表属性是selectedOptions,而我把它写成selectedOption了,才导致我获取选中的值一直不成功。

html代码

 <div id="content1">
        <select id="userNameList" data-bind="options:userNames,optionsText:'Key',optionsValue:'Value',selectedOptions:selectedUserName,optionsCaption:'选择'">
        </select>
        <b id="selectValue" data-bind="html:selectedUserName"></b>
    </div>

js引用

 <script type="text/javascript" src="js/knockout30.js"></script>
    <script src="js/jquery.min.js"></script>

js代码

     var ViewModel = function() {
            var self = this;
            self.userNames = ko.observableArray([{
                'Value': 1,
                'Key': 'tom'
            }, {
                'Value': 2,
                'Key': 'jerry'
            }, {
                'Value': 3,
                'Key': 'david'
            }]);
            self.selectedUserName = ko.observable();
        }
        var currentViewModel = new ViewModel();
        ko.applyBindings(currentViewModel);

上一篇 下一篇

猜你喜欢

热点阅读