jQuery小练习2——下拉框应用

最新推荐文章于 2022-02-26 19:19:51 发布
最新推荐文章于 2022-02-26 19:19:51 发布
阅读量412 收藏 1
点赞数
分类专栏： JavaScript 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cckevincyh/article/details/53156144
版权 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript"  src="../js/jquery-1.4.2.js"></script>
<title>无标题文档</title>

<style type="text/css">
<!--

BODY
{
    font-family:Courier;;
    font-size: 12px;
    margin:0px 0px 0px 0px;
    overflow-x:no;
    overflow-y:no;
    background-color: #B8D3F4;
}
td
{
    font-size:12px;
}
.default_input
{
    border:1px solid #666666;
    height:18px;
    font-size:12px;
}
.default_input2
{
    border:1px solid #666666;
    height:18px;
    font-size:12px;
}
.nowrite_input
{
    border:1px solid #849EB5;
    height:18px;
    font-size:12px;
    background-color:#EBEAE7;
    color: #9E9A9E;
}
.default_list
{
    font-size:12px;
  border:1px solid #849EB5;
}
.default_textarea
{
    font-size:12px;
    border:1px solid #849EB5;
}

.nowrite_textarea
{
    border:1px solid #849EB5;
    font-size:12px;
    background-color:#EBEAE7;
    color: #9E9A9E;
}

.wordtd5 {
    font-size: 12px;
    text-align: center;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #b8c4f4;
}

.wordtd {
    font-size: 12px;
    text-align: left;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #b8c4f4;
}
.wordtd_1 {
    font-size: 12px;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #516CD6;
    color:#fff;
}
.wordtd_2{
    font-size: 12px;
    text-align: right;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #64BDF9;
}
.wordtd_3{
    font-size: 12px;
    text-align: right;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #F1DD34;
}
.inputtd
{
    font-size:12px;
    vertical-align:top;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}
.inputtd2
{
    text-align: center;
    font-size:12px;
    vertical-align:top;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}
.tablebg
{
    font-size:12px;
}

.tb{
    border-collapse: collapse;
    border: 1px outset #999999;
    background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
       border-right-width:0px;
       border-left-width:0px;
       border-top-width:0px;
       border-bottom-width:1px;}

.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}




.noborder {
    border: none;
}

.button {
    border: 1px ridge #ffffff;
    line-height:18px;
    height: 20px;
    width: 45px;
    padding-top: 0px;
    background:#CBDAF7;
    color:#000000;
    font-size: 9pt;
    font-family:Courier;;
} 

.textarea {
    font-family: Arial, Helvetica, sans-serif, "??";
    font-size: 9pt;
    color: #000000;
    border-bottom-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #000000;
    background-color:transparent;
    text-align: left
}
-->
</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
        <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
        <select name="first" size="10" multiple="multiple" class="td3" id="first">
          <option value="选项1">选项1</option>
          <option value="选项2">选项2</option>
          <option value="选项3">选项3</option>
          <option value="选项4">选项4</option>
          <option value="选项5">选项5</option>
          <option value="选项6">选项6</option>
          <option value="选项7">选项7</option>
          <option value="选项8">选项8</option>
        </select>    
    </td>
    <td width="69" valign="middle">
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
       <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
        </td>
    <td width="127" align="left">
      <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
    </td>
  </tr>
</table>
</div>
</body>
  <script type="text/javascript">

    //<input name="add"  id="add" type="button" class="button" value="-->" /> 
        $("#add").click(function(){
            $("#first option:selected").appendTo($("#second"));
        });

        //<input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
        $("#add_all").click(function(){
            $("#first option").appendTo($("#second"));
        });


        //<input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
        $("#remove").click(function(){
            $("#second option:selected").appendTo($("#first"));
        });


        //<input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
        $("#remove_all").click(function(){
            $("#second option").appendTo($("#first"));
        });

        //双击
        $("#first").dblclick(function(){
            $("#first option:selected").appendTo($("#second"));
        });

        $("#second").dblclick(function(){
            $("#second option:selected").appendTo($("#first"));
        });

  </script>
</html>

这里写图片描述

c.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery+ajax从数据库获取数据实现三级联动下拉框
qq_44940676的博客
11-25 835
今天在做练习的时候需要做一个三级联动的下拉框，大概内容就是第一个下拉框显示学院，第二个下拉框显示该学院所有专业，第三个下拉框为该专业所有班级。
浅学 jQuery
MaShaYaDi的博客
05-15 547
浅学 jQuery 前言：本文内容较为浅略，建议在有相关 JS、HTML 的基础后进行观看，仅作为预习、复习使用效果较好，如需全面学习仅做辅助学习使用。本文中的练习在浏览器查看时一定要打开 F12/开发者模式 来进行观看代码效果！ —— “玛莎鸭弟”
jQuery练习4--下拉框应用
hacket
10-30 535
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 script type="text/javascript"
下拉框练习，使用onchange事件
ZPD_zpd的博客
12-01 1372
onchange 事件会在域的内容改变时发生。 <body> <select name="" id="s1"> <option value="">请选择省份/直辖市</option> <option value="河北">河北省</option> <option value="山东">山东省</option> <option value="天津">天津市</option&gt
jQuery练习5——val()练习
C.
11-14 1033
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>XXX</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="Java
JQuery第二天——JQuery的DOM操作
weixin_30418341的博客
05-15 72
　　JQuery拥有隐式迭代和显式迭代 　　　　因为JQuery为类数组对象，可以使用手动遍历实现显式 .each()；也可以使用 $("p").click(function(){ var text = $(this).text(); alert(text); ...
javaweb实训第二天上午——jQuery笔记
dearQiHao的博客
05-22 1309
jQuery基础 JQuery的认识 JS框架概述 JQuery优势 和原生JS比较 JQuery的基本使用 jQuery库引入 <scripttype="text/javascript"src="js/jquery-2.1.3.js"></script> <scripttype="text/javascript"> alert(jQuery) alert($) alert($===jQuery) ...
jQuery
qq_53267860的博客
02-26 687
目录1、jQuery简介1.1 jQuery概念1.2 jQuery作用1.3 jQuery使用1.3.1 使用jQuery1.3.2 区别2种JS库库文件1.3.3 区别2种引用JS库的方式(1) 服务器本地库(2)CDN远程库1.3.4 区别jQuery的不同版本(1) 1.x(2) 2.x(3) 3.x2、jQuery快速入门2.1 jQuery的引入2.2 书写HelloWorld3、jQuery语法3.1 jQuery核心函数3.1.0 jQuery核心函数是什么？(1) $是什么?(2)wind
JQuery学习笔记（三）——选择器2
x_k的专栏
07-31 874
4.属性过滤 5.子元素过滤 6.表单对象属性过滤选择器 1. 点击所有的 p 节点, 能够弹出其对应的文本内容 2. 使第一个 table 隔行变色 3.点击 button, 弹出 checkbox 被选中的个数
利用Jquery实现可多选的下拉框
12-09
在页面加载完成后，使用jQuery的`$(function() {})`或`$(document).ready()`方法，当DOM元素加载完毕后，对下拉框应用`multiselect()`方法： ```javascript $(function() { $("#company").multiselect(); }); ``` ...
JQuery下拉框应用示例介绍
12-07
实现两个下拉框数据移动，追加 代码如下: $(‘#add’).click(function(){ var $options = $(‘#select1 option:selected’); //获取选中的项 var $remove = $options.remove(); $remove.appenTo(‘#select2’); }); ...
jQuery下拉框的简单应用
01-19
先看看效果图： 大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单： <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 />... margin:2px 2px; p
Jquery Ajax设置withCredentials解决跨域请求
热门推荐
C.
07-21 3万+
后端代码：  httpResponse.setHeader("Access-Control-Allow-Origin", httpServletRequest.getHeader("Origin")); httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With...
JavaScript获取select元素下的每一个option
C.
11-10 1万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="d
jQuery过滤选择器——属性过滤选择器
C.
11-13 6781
属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 1、[attribute] 用法: $(”div[id]“) ; 返回值：集合元素 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签. 2、[attribute=value] 用法: $(”input[name='newsletter']“).attr(”checke
ajaxFileUpload 异步上传文件配合Struts2的简单使用
C.
04-16 5773
我在用SSH框架写一个简单的企业网站的时候需要对产品的图片进行异步上传，经过研究成功实现了ajaxFileUpload+Struts2的异步上传功能，所以抽空做下总结，本文主要讲解ajaxFileUpload 异步上传文件配合Struts2的简单使用 jQuery插件ajaxFileUpload可以实现ajax文件上传，使用非常简单。 准备环境 所需环境： jquery.js aja
jQuery过滤选择器——子元素过滤选择器
C.
11-13 4843
子元素过滤选择器1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值 :集合元素 说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始. 2、:first-child
ajaxFileUpload 异步上传文件配合PHP的使用
C.
04-17 4701
本人最近在学习PHP，并在用PHP写一个简单的个人博客网站的时候需要对个人的头像进行异步上传，经过研究，成功实现了ajaxFileUpload+PHP的异步上传功能，所以抽空做下总结，本文主要讲解ajaxFileUpload 异步上传文件配合PHP使用 jQuery插件ajaxFileUpload可以实现ajax文件上传，使用非常简单。 准备环境 jquery.js ajaxfileu
jquery多选下拉框设置单选下拉框
最新发布
10-08
2. 使用jQuery的`.removeAttr()`方法移除多选下拉框的`multiple`属性，即将其设置为单选下拉框。 3. 如果需要，可以使用jQuery的`.val()`方法设置默认选项。 下面是一个示例代码： ```javascript // 选择多选...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值