自定义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. 【mongodb系统学习之七】mongodb的关闭

    七.mongodb的关闭: 1).直接根据进程id杀死mongodb进程,如图(注意,kill -9要慎用,这个是强制关闭进程,可能导致文件损坏,尽量不要用,可以直接kill不加参数): 2).如果不 ...

  2. 利用Eclipse中的Maven构建Web项目（二）

    利用Eclipse中的Maven构建Web项目 1.新建源文件夹,Java Resources鼠标右键,"New-->Source Folder" 2.新建src/main/ ...

  3. Caused by: java.lang.ClassNotFoundException: javax.persistence.NamedStoredProcedureQuery

    1.错误描述 2014-7-12 21:06:37 org.hibernate.engine.jdbc.internal.LobCreatorBuilder useContextualLobCreat ...

  4. 表格布局----基于bootstrap样式 布局

    在实际开发中,我们通过菜鸟教程复制的表格往往不能满足我们的开发需求,样式很难看,而且不能自适应,尤其是需要到处Excel的样式,感觉非常糟糕,这次我就写了一个表单,不足之处,希望大神们多多指教: 代码 ...

  5. 芝麻HTTP：python version 2. required,which was not found in the registry 解决方案

    不能在注册表中识别python2.7 新建一个register.py 文件 import sys from _winreg import * # tweak as necessary version ...

  6. C# SerialPort自定义串口DCB

    C# SerialPort自定义串口DCBChange DCB fields from SerialPort instance CPS:中文DCB结构详解表 译自Change DCB fields f ...

  7. 洛谷P3459 [POI2007]MEG-Megalopolis（树链剖分，Splay）

    洛谷题目传送门 正解是树状数组维护dfn序上的前缀和,这样的思路真是又玄学又令我惊叹( 我太弱啦,根本想不到)Orz各路Dalao 今天考了这道题,数据范围还比洛谷的小,只有\(10^5\)(害我复制 ...

  8. 检测flash是否安装及版本号

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. mysql大小写敏感问题

    问题: 在创建mysql表的时候发现不论表明是大写或小写,建完之后统一被变成了小写. 原因: MySQL在windows下是不区分大小写的,将script文件导入MySQL后表名也会自动转化为小写. ...

  10. handsontable 方法汇总

    核心方法 1.为handsontable添加钩子方法 addHook(key,callback):key为钩子方法名 例如:hot.addHook('beforeInit', myCallback); ...