自定义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. 进程中调用CreateMutex

    // TestStorage.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <Windows.h> #inc ...

  2. dojo之dojox/data/CsvStore初始化

    dojo之dojox/data/CsvStore初始化 1.var csvStore = new dojox.data.CsvStore({url:"student.csv"}); ...

  3. dojo表格分页之各个参数代表的意义（一）

    下面是dojo表格分页参数代表的意义 //每页可以显示10/15/20/25/30条记录 (1)pageSizes: [10, 15, 20, 25,30], //每页显示的记录从多少到多少,共多少条 ...

  4. echarts中的option.legend.data has not been defined.

    1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec ...

  5. 错误代码： 1054 Unknown column 't.createUsrId' in 'group statement'

    1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:select count(t.id),t.`createUserId` fr ...

  6. 错误代码： 1242 Subquery returns more than 1 row

    1. 错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:SELECT t.id, DATE_FORMAT( t.statisTim ...

  7. 关于这个该死的报错：TypeError - 'undefined' is not a function (evaluating '_getTagName(currWindow).toLowerCase()')

    在利用Selenium爬取页面信息的时候突然报错,第一条信息爬取的时候还好好的,第二条就不行了. 请参考网上的爬取代码: # coding=utf-8"""Created ...

  8. 畅通工程 HDU - 1232

    某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只要互相间接 ...

  9. ASP.NET VS2013 Office 转 PDF

    本文适用于VS2013 项目中的Word转换为PDF.Excel转换为PDF.PPT转换为PDF 0.一种更加简单方便的方法 1.本页所用的方法在本机测试时基本不会出现问题,只是偶尔PPT转PDF失败 ...

  10. MyISAM和InnoDB索引实现区别

    首先来讲MyISAM: MyISAM引擎使用B+Tree作为索引结构,叶节点的data域存放的是数据记录的地址.下图是MyISAM索引的原理图: 这里设表一共有三列,假设我们以Col1为主键,则上图是 ...