zoukankan      html  css  js  c++  java
  • Konckout第二个实例:数组数据类型双向绑定 -- 下拉select

    自定义js做法:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                #content1{padding: 20px;}
            </style>
        </head>
        <body>
            <div id="content1">
                <select id="userNameList">
                </select>
                <b id="selectValue"></b>
            </div>
            
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/knockout30.js"></script>
            <script>
                function RenderSelectOptions(datas,selectNode){
                    var optionString = "";
                    for(var i in datas){
                        optionString += "<option value="+datas[i]+">"+datas[i]+"</option>";
                    }
                    selectNode.html(optionString);
                }
                $(function(){
                    var userName = ['党---','兴---','明---'];
                    var userNameList = $('#userNameList');
                    
                    RenderSelectOptions(userName,userNameList);
                    
                    $('#userNameList').change(function(){
                        var selectValue = $('#selectValue');
                        selectValue.html(userNameList.val());
                    });
                });
            </script>
        </body>
    </html>

    knockout方法

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                #content1{padding: 20px;}
            </style>
        </head>
        <body>
            <div id="content1">
                <select id="userNameList" data-bind="options:userNames,selectedOptions:selectedUserName">
                </select>
                <b id="selectValue" data-bind="html:selectedUserName"></b>
            </div>
            
            <script src="js/jquery.js"></script>
            <script src="js/knockout30.js"></script>
            <script>
                $(function(){
                    var ViewModel = function(){
                        var self = this;
                        self.userNames = ko.observable(['aaa','bbb','ccc']);
                        self.selectedUserName = ko.observable("");
                    }
                    var currentViewModel = new ViewModel();
                    ko.applyBindings(currentViewModel);
                });
            </script>
        </body>
    </html>

     但:这样option上value和显示的文本都是数组里的值,当需要两个不一样时,该肿么办呢:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                #content1{padding: 20px;}
            </style>
        </head>
        <body>
            <div id="content1">
                <select id="userNameList" data-bind="options:userNames,optionsText:'Key',optionsValue:'Value',selectedOptions:selectedUserName">
                </select>
                <b id="selectValue" data-bind="html:selectedUserName"></b>
            </div>
            
            <script src="js/jquery.js"></script>
            <script src="js/knockout30.js"></script>
            <script>
                $(function(){
                    var ViewModel = function(){
                        var self = this;
                        //self.userNames = ko.observable(['aaa','bbb','ccc']);
                        self.userNames = ko.observable([{Key:'tom',Value:'1'},{Key:'jerry',Value:'2'},{Key:'dang',Value:'3'}]);
                        self.selectedUserName = ko.observable();
                    }
                    var currentViewModel = new ViewModel();
                    ko.applyBindings(currentViewModel);
                });
            </script>
        </body>
    </html>
  • 相关阅读:
    负margin在页面布局中的应用
    2018-05-04 圣杯布局 and 双飞翼布局,display:flex
    vue 动态加载图片路径报错解决方法
    vue 带参数的跳转-完成一个功能之后 之后需要深思,否则还会忘记
    vue项目打包后打开空白解决办法
    css 居中方法
    vue 不用npm下载安装包 该如何引用js
    安装WAMP 及 修改MYSQL用户名 、 密码
    Python 软件开发目录规范
    Python 1-3区分Python文件的两种用途和模块的搜索路径
  • 原文地址:https://www.cnblogs.com/by-dxm/p/6738798.html
Copyright © 2011-2022 走看看