自定义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. java发送邮件时遇到的坑

    之前用163邮箱发邮件时明明是成功的,但是使用中国移动自己的邮箱时,无论如何在linux服务器中都发送不成功,一开始报如下错误: javax.mail.MessagingException: Unkn ...

  2. hi3531的时钟系统

    时钟管理模块对芯片时钟输入.时钟生成和控制进行统一的管理,包括: 时钟管理模块有以下两部分输入:

  3. vxWorks内核实现基本原理

    内核实现基本原理     VxWorks 内核维护三个队列:tick队列.ready 队列.active 队列.另外还有一个队列涉及任务,即任务等待资源时所处的队列,这个队列可以是VxWorks内核提 ...

  4. Java类型转化报错

    Java类型转化报错 报错如下: java.lang.ClassCastException:java.util.HashMap cannot be cast to java.util.List.

  5. Caused by: java.lang.ClassNotFoundException: org.hibernate.annotations.common.reflection.MetadataPro

    1.错误描述 信息: MLog clients using java 1.4+ standard logging. 2014-7-12 19:29:20 com.mchange.v2.c3p0.C3P ...

  6. devDependencies和dependencies的版本写法

    devDependencies和dependencies的版本写法 指定版本:比如1.2.2,遵循大版本.次要版本.小版本的格式规定,安装时只安装指定版本. 波浪号(tilde)+指定版本:比如~1. ...

  7. iOS - MySQL 的安装配置

    前言 提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提前准备好的软件: mysql-5.7.17-macos10.12-x86_64.dm ...

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

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

  9. [BZOJ1880] [Sdoi2009] Elaxia的路线 (SPFA & 拓扑排序)

    Description 最近,Elaxia和w**的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w**每天都要奔波于宿舍和实验室之间, ...

  10. Vue-组件嵌套之——父组件向子组件传值

    父组件向子组件传值步骤: 在这里先定义一下,相对本案例来说:App.vue是父组件,Second-module.vue是子组件. 一.首先,值肯定是定义在父组件中的,供所有子组件共享.所以要在父组件的 ...