自定义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. zTree实现获取当前选中的第一个节点在同级节点中的序号

    zTree实现获取当前选中的第一个节点在同级节点中的序号 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTr ...

  2. Caused by: java.io.FileNotFoundException

    1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...

  3. 过滤文件代码 python

    import os import cv2 import shutil # store all file in directory global totalFileList totalFileList ...

  4. Android App性能评测分析-流畅度篇

    1.前言 在手机App竞争越来越激烈的今天,Android App的各项性能特别是流畅度不如IOS,安卓基于java虚拟机运行,触控响应的延迟和卡顿比IOS系统严重得多.一些下拉上滑.双指缩放快速打字 ...

  5. Spring Boot Actutaur + Telegraf + InFluxDB + Grafana 构建监控平台

    完成一套精准,漂亮图形化监控系统从这里开始第一步 Telegraf是收集和报告指标和数据的代理 它是TICK堆栈的一部分,是一个用于收集和报告指标的插件驱动的服务器代理.Telegraf拥有插件或集成 ...

  6. python urllib和urllib3包使用

    urllib包 urllib是一个包含几个模块来处理请求的库.分别是: urllib.request 发送http请求 urllib.error 处理请求过程中,出现的异常. urllib.parse ...

  7. canvas练手项目(一)——选取图片

    今天无事可做,在春意盎然的下午突发奇想想做一个关于图片处理的在线网页应用.不要问我为什么做这个,因为我想做!关于这个项目,我想基于canvas来实现,canvas是个好东西,我一直很喜欢,就是我没有做 ...

  8. jQuery 事件代理时的this

    在jQuery使用on方法进行事件代理的时候,this是有多种变化的.下面开始对其进行研究 HTML的代码: <ul id="selected-plays" class=&q ...

  9. php数组基础知识

    php数组 <?php $kele = array('张三',10 => '李四', 'PHP中文网' , '去PHP中文网学PHP', 19 => '王二' , '小明'); // ...

  10. DaTaX当成jar包当作第三方库启动的相关问题

    上一篇已经大致的将了本地状况下DaTaX的纯Java代码启动的过程 http://www.cnblogs.com/blogsofmy/p/8287637.html不了解的请点超链接 这次我们来说说文件 ...