后半部分还有自定义下拉列表和开灯关灯的效果，可以进来来看一下 哦

如果网页有下拉列表和复选框，看一下Jquery怎么来操作他们，主要怎么来选取他们的数据，怎么设置某一项选中

先来看个下拉列表

  1. <body>
  2. <select id="sel">
  3. <option value="张店">张店</option>
  4. <option value="淄川">淄川</option>
  5. <option value="博山">博山</option>
  6. <option value="桓台">桓台</option>
  7. </select>
  8. <input type="button" value="取值" id="qu" />
  9. </body>

上面是一个非常简单的下拉列表，加了一个按钮，可以选取他们的值，取值的话就得给下拉列表加value

运行后就是这样的：

然后需要用到Jquery，所以要先引入Jquery包

然后就可以写js代码了

对括号里面的e，有解释，来看一下e.都包括哪些数据

如果这个事件不是点击事件，是关于按键的事件，如按键按下按键抬起，则这时候e就包含了按键的数据，能够取到能按了什么键

来看一下运行的结果

下拉列表选中哪个，然后点击取值，就会取到选中的那个值

再加一个赋值的按钮

写赋值的js代码部分

赋值和取值都需要val方法就可以完成

来看一下运行结果

比如说，本来是这个状态：

然后点击一下赋值

就会变成代码内val值对应的地址

下面再来看个复选框列表

看一下js代码部分

运行后的结果：

如果三个都选中，那么会弹出三个窗口，先是张店，点击确定然后淄川，再点确定随后周村

有取值了，可以再给它设个赋值试试

js代码部分

看一下能不能运行成功

点击赋值后，就选中了值为周村的复选框，运行成功

这样有点麻烦，还有简单的做法

只需要三句，看一下能不能运行成功

点击赋值，可以选中，运行成功

下面做一个，自定义的下拉列表，外加一个开灯关灯效果

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script src="../xinphp/jquery-1.11.2.min.js"></script>
  7. <style type="text/css">
  8. #zz{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:black; z-index:5;filter:alpha(opacity=50);
  9. -moz-opacity:0.5;
  10. -khtml-opacity: 0.5;
  11. opacity: 0.5;}
  12. </style>
  13. </head>
  14.  
  15. <body>
  16.  
  17. <select id="sel">
  18.  
  19. </select>
  20.  
  21. <input type="text" id="shuru" />
  22. <input type="button" value="添加" id="btn" />
  23. <input type="button" value="移除" id="yichu" />
  24.  
  25. <div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;">
  26. <input type="button" value="关灯" id="guan" />
  27. <input type="button" value="开灯" id="kai" />
  28. </div>
  29.  
  30. </body>
  31. <script type="text/javascript">
  32.  
  33. $("#btn").click(function(){
  34.     var v = $("#shuru").val();
  35.     //var str = "<option value='"+v+"'>"+v+"</option>";
  36.  
  37.     //造元素
  38.     var op = document.createElement("option");
  39.     op.setAttribute("value",v);
  40.     op.innerHTML = v;
  41.  
  42.     $("#sel").append(op); //追加
  43.  
  44. })
  45.  
  46. $("#yichu").click(function(){
  47.         var v = $("#shuru").val(); 
  48.  
  49.         $("[value='"+v+"']").remove(); //移除
  50.     })
  51.  
  52. $("#guan").click(function(){
  53.         var str = "<div id='zz'></div>";
  54.         $("body").append(str);
  55.         $(this).css("display","none");
  56.         $("#kai").css("display","block");
  57.     })
  58. $("#kai").click(function(){
  59.         $("#zz").remove();
  60.         $("#guan").css("display","block");
  61.         $(this).css("display","none");
  62.     })
  63.  
  64. </script>
  65. </html>

来看一下运行效果

开始是这样的

添加数据

点击添加

数据已经在里面了

再点击移除

成功删除bb

再来看一下关灯开灯的效果

点击关灯后

再点击开灯

运行成功！

有兴趣的也可以做做试试

转载【http://www.cnblogs.com/qishuang/p/6261408.html】

关于我们的Jquery操作下拉列表和复选框，自定义下拉的更多相关文章

  1. Jquery操作下拉列表和复选框，自定义下拉

    后半部分还有自定义下拉列表和开灯关灯的效果,可以进来来看一下 哦 如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,怎么设置某一项选中 先来看个下拉列表 < ...

  2. html基本标签表单实现交互原理，单选框，复选框，下拉框介绍

    表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...

  3. Easyui-combobox-checkbox-带复选框的下拉框

    $.post("getSubInsuranceTypeList.do",{parent_id:node.id},function(result){                  ...

  4. DOM（十）使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

  5. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  6. [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框

    本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...

  7. Selenium3自动化测试【28】单选框、复选框、下拉选择框

    Html页面中的单选按钮.复选框.下拉框均可通过WebDriver实现操做.本节结合案例一起来看看WebDriver如何操做这些控件. 同步视频知识与系列知识内容,可关注:[公众号]:柒哥测试:[WX ...

  8. JQuery对单选框，复选框，下拉菜单的操作

    JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...

  9. JAVA个人小程序GUI篇-收银（标签、按钮、复选框、下拉标、文本域、表格······）

    如果用eclipse需先装载windowsbuild //导入包 import java.awt.BorderLayout; import java.awt.EventQueue; import ja ...

随机推荐

  1. java加密类型和算法名称

    项目里有各种加密方法,但从来没有仔细研究过.一般只是copy.这几天遇到一些问题,看了一下加密代码,觉得有些疑惑. 我们知道jdk已经为我们包装好了很多的算法.但究竟包装了哪些算法,怎么去掉这些算法我 ...

  2. LInkedList集合练习

    package com.java.linkedlist; import java.util.LinkedList; /* * LinkedList类的特点:查询速度慢,增删速度快. * LinkedL ...

  3. Windows7 QT5.6.0（64位）使用mysql（64位）环境搭建详解

    1 说明 使用环境为:Windows7 VS2015 QT5.6.0(64位),MYSQL 5.7.13(64位). 网上各种错误.模糊.抽象的资料,配置环境花了半天,痛定思痛,总结出来,方便后来人. ...

  4. canvas 之 - 精灵 钟表动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. linux 查看端口号命令

    Linux下如果我们需要知道2809号端口的情况的话,我们可以这样,如下命令: $netstat -pan|grep 24800 tcp        0      0 0.0.0.0:24800   ...

  6. VisualSVN Server 从此告别SVN记事本配置

    http://www.visualsvn.com/downloads/ 注意下载的是Server版本,他还会提供一个visual Studio的插件:   安装完毕后,可以在管理界面进行角色添加,创建 ...

  7. jQuery设置按钮被点击状态

    js和jquery如何使按钮失效,很简单,只要设置disabled属性为true即为不可用状态即可 1.JS方法一: document.getElementByIdx("btn") ...

  8. 无插件Vim编程技巧

    无插件Vim编程技巧 http://bbs.byr.cn/#!article/buptAUTA/59钻风 2014-03-24 09:43:46 发表于:vim  相信大家看过<简明Vim教程& ...

  9. QT变异版本下载（SJLJ长跳转，DWARF不传递错误(32位专用)，SEH(64位专用)），以及QT的实验室项目

    http://www.tver-soft.org/ http://sourceforge.net/projects/qt64ng/ ---------------------------------- ...

  10. SQL server 触发器、视图

    一.触发器 1.触发器为特殊类型的存储过程,可在执行语言事件时自动生效.SQL Server 包括三种常规类型的触发器:DML 触发器.DDL 触发器和登录触发器. 主要讲述DML触发器,DML触发器 ...