自定义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. 关于html5 data-*自定义属性相关注意点和踩过的坑

    在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写(后面会说),使用这样的结构可以进行数 ...

  2. Keras官方中文文档：函数式模型API

    \ 函数式模型接口 为什么叫"函数式模型",请查看"Keras新手指南"的相关部分 Keras的函数式模型为Model,即广义的拥有输入和输出的模型,我们使用M ...

  3. NOIP2017+停课总结

    注意 此文章禁止一切含虚伪内容的评论,违者删除评论 其删除解释权归博主所有 Part1 论yyb NOIP 如何炸裂 前言 离NOIP已有三个星期,忘却的救主快要降临了吧,我正有写一篇总结的必要了.. ...

  4. bzoj2157

    LCT板子,打个lazy即可 # include <stdio.h> # include <stdlib.h> # include <iostream> # inc ...

  5. 【BZOJ2693】jzptab

    Time Limit: 5000 ms Memory Limit: 512 MB description 给你\(n, m\),求\(\sum\limits_{i=1}^{n}\sum\limits_ ...

  6. CyQ.data MDataTable

    前言 以前一两个月才出一篇,这三天有点变态地连续1天1篇(其实都是上周末两天写好的存货). 短期应该没有新的和此框架相关的文章要写了,这应该是最后一篇,大伙且看且珍惜. 前两篇讲数据库读写分享和分布式 ...

  7. java --基本数据类型间的转换

    public class changetype { public static void main(String[] args) { String ar = "true"; //S ...

  8. java——对象学习笔记

    1.面向对象(OOP)的三大特性 对象的行为(behavior):可以对对象施加哪些操作,或者可以对对象施加哪些方法. 对象的状态(state):当施加那些方法后,对象如何响应. 对象标识(ident ...

  9. C#中的多线程与线程互斥

    通过多线程,C#可以并行地执行代码. 每一个线程都有它独立的执行路径,所有线程都能访问共有变量. 这就引发了线程竞争 这时就需要使用线程安全的处理方式使得线程互斥 先来看一段多线程代码 using S ...

  10. 在VMWare上安装Arch Linux

    1.为什么选择Arch Linux Arch Linux 是通用 x86-64 GNU/Linux 发行版.Arch采用滚动升级模式,尽全力提供最新的稳定版软件.初始安装的Arch只是一个基本系统,随 ...