自定义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>

Konckout第二个实例：数组数据类型双向绑定 -- 下拉select的更多相关文章

  1. WPF AutoGeneratingColumn 绑定下拉框

    WPF自动产生列,前台代码: <DataGrid x:Name="Dg" AutoGenerateColumns="True" CanUserAddRow ...

  2. .net Core学习笔记3 编辑列表并绑定下拉列

    本次主要实现列表的编辑及下拉列表的绑定 先看效果图: 主要用DropDownList绑定下拉列后端代码: 1:定义一个存下拉数据类 public class SelectItem { public s ...

  3. Bootstrap历练实例：导航内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. 奥展项目笔记07--vue绑定下拉框和checkbox总结

    1.vue绑定下拉框 <div class="col-md-1 data"> <select class="form-control " v- ...

  5. js绑定下拉框

    ---恢复内容开始--- 方法一 js-ajax部分 function GetDListOfCt() { $.ajax({ url: "../../Ajax/Boss_Show.ashx?t ...

  6. MVC4 绑定下拉框方法，解决编辑时不绑定值

    方法一  Controller 部分代码: public ActionResult Modify(int id) { //3.1.1 检查id //3.1.2根据id查询数据 Models.Stude ...

  7. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  8. jquery easyui无法绑定下拉框内容

    最近在研究jquery easyui的DataGrid,发现DataGrid中的下拉框无法绑定值,找了很久也没发现是具体问题所在,最后还是同事帮忙搞定的.具体问题竟然是jquery easyui提供的 ...

  9. 绑定下拉框时避免触发SelectedIndexChanged事件

    在从数据库读取数据集绑定到下拉框时会立即触发其SelectedIndexChanged事件造成异常,可对其SelectedIndexChanged事件采取先解除后附加的方法解决. cmbXl_gt.V ...

随机推荐

  1. win7 vs2012+wdk8.0 搭建wdf驱动开发环境

    开发环境搭建:系统:win7 x64工具:vs2012 + WDK8.0插件:wdfcoinstaller.msi(1)先安装vs2012,再安装wdk8.0,这样在打开vs2012时可以创建wind ...

  2. mysql常用基础操作语法（十一）~~字符串函数【命令行模式】

    注:sql的移植性比较强,函数的移植性不强,一般为数据库软件特有,例如mysql有mysql的函数,oracle有oracle的函数. 1.concat连接字符串: 从上图中可以看出,直接使用sele ...

  3. Java中替换HTML标签的方法

    1.替换HTML标签 replaceAll("\\&[a-zA-Z]{0,9};", "").replaceAll("<[^>]* ...

  4. 草料Chrome浏览器插件，让二维码更好用

    安装插件草料chrome插件,是专为chrome核心的浏览器开发的一个二维码应用增强工具插件. 自动将地址栏链接生成二维码 以谷歌原生的chrome浏览器为例,插件安装成功后会在浏览器地址栏旁边出现一 ...

  5. E: 未发现软件包 install_flash_player_11_linux.x86_64.tar.gz

    1 错误描述 youhaidong@youhaidong:~$ sudo apt-get install install_flash_player_11_linux.x86_64.tar.gz 正在读 ...

  6. web开发中对缓存的使用

    很久没有发表随笔了,最近工作不是太忙,抽点时间 给大家谈谈缓存吧 ; 在我从事web开发的几年实践中  接触了缓存技术 也是比较多的,在最初的 项目当中 我们用到 hibernate 的 一二级缓存, ...

  7. angular路由参数说明

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...

  8. 护航者，腾讯云： 2017年度游戏行业DDoS态势报告—回溯与前瞻

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯游戏云 前言 自14年开始,全球DDoS攻击持续爆发,攻击峰值不断创记录.2017年,这种依靠超大流量不断冲击服务器和带宽造成业务 ...

  9. RobotFramework下的http接口自动化Get Response Body关键字的使用

    Get Response Body 关键字在上面已经有用到了,服务器端在处理完成了发出的http请求后,会给出对应的响应结果,那么Get Response Body这个关键字就是来获取响应结果中的主体 ...

  10. 【BZOJ1501】【NOI2005】智慧珠游戏（搜索）

    [BZOJ1501][NOI2005]智慧珠游戏(搜索) 题面 我要一改我懒惰的作风 这道题目必须放题面 Description Input 文件中包含初始的盘件描述,一共有10行,第i行有i个字符. ...