html多选下拉框

最新推荐文章于 2024-05-03 11:17:45 发布
最新推荐文章于 2024-05-03 11:17:45 发布
阅读量9.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： html path stylesheet border class javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiabeis/article/details/5683296
版权

参考：http://dropdown-check-list.googlecode.com/svn/trunk/src/demo.html

一个jquery ui,实现html的多选下拉框，在下拉里面加checkbox，不改变页面的提交特性，只是动态的改变select选中的多选数据。

jsp页面例子：

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8" import="java.util.*,java.text.*"%>
<%@ taglib prefix="c" uri="/jstl/c"%>
<%@ taglib prefix="fn" uri="/jstl/fn"%>
<%@ taglib prefix="fmt" uri="/jstl/fmt"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">
  <title>纳税用户核定</title>
  <link href="<%=path%>/css/css.css" rel="stylesheet" type="text/css" />
  <script language="javascript" src="<%=path%>/js/date/calendar.js"></script>
  <script language="javascript" src="<%=path%>/js/date/date.js"></script>
  <link rel="stylesheet" type="text/css"
   href="<%=path%>/js/dropdownchecklist/ui.dropdownchecklist.css" />
  <script type="text/javascript"
   src="<%=path%>/js/dropdownchecklist/jquery.js"></script>
  <script type="text/javascript"
   src="<%=path%>/js/dropdownchecklist/ui.core.js"></script>
  <script type="text/javascript"
   src="<%=path%>/js/dropdownchecklist/ui.dropdownchecklist.js"></script>
  <script type="text/javascript">
         $(document).ready(function() {
             $("#POSITION").dropdownchecklist({firstItemChecksAll: true, maxDropHeight: 100});
         });
     </script>
 </head>
 <body οnlοad="qry()">
  <form action="<%=path%>/xxhdAction.do?action=nshhdQuery"
   id="formConditon" name="formCondition" method="post"
   target="listFrame">
   <table width="100%" height="100%" border="0" cellpadding="0"
    cellspacing="0">
    <tr>
     <td height="60">
      <table width="100%" border="0" height="60" cellpadding="0"
       cellspacing="0">
       <tr>
        <td
         background="<%=path%>/templates/images/inner/center_bg01.jpg">
         <table width="100%" border="0" height="60" cellpadding="0"
          cellspacing="0">

          <tr>
           <td width="8">
            &nbsp;
           </td>
           <td width="8">
            &nbsp;
           </td>
           <td width="40%" align="left" class="blue">
            &nbsp;
           </td>
           <td align="right" class="blue">
            &nbsp;&nbsp;
           </td>
           <td width="20" class="blue">
            &nbsp;
           </td>
          </tr>
          <tr>
           <td width="8">
            &nbsp;
           </td>
           <td width="8">
            &nbsp;
           </td>
           <td width="40%" align="left" class="blue">
            <img src="<%=path%>/templates/images/inner/icon01.jpg" />
            &nbsp;&nbsp;纳税用户核定&nbsp;
           </td>
           <td align="right" class="blue">
            &nbsp;&nbsp;
           </td>
           <td width="20" class="blue">
            &nbsp;
           </td>
          </tr>
         </table>
        </td>
       </tr>

      </table>
     </td>
    </tr>

    <tr>
     <td align="center" valign="top">
      <table width="100%" align="center" border="0" cellpadding="0"
       cellspacing="0" background="<%=path%>/templates/img/query_01.gif">
       <tr>
        <td height="10"></td>
       </tr>
       <tr>
        <td>
         <table width="98%" align="center" border="0"
          class="blue-border" bordercolor="#CCCCCC">
          <tr>
           <td>
            计算机代码:
           </td>
           <td>
            <input type="text" name="JSJDM" value="${JSJDM}">
           </td>
           <td>
            纳税人名称:
           </td>
           <td>
            <input type="text" name="NSRMC" value="${NSRMC}">
           </td>
           <td>
            纳税人状态:
           </td>
           <td>
           
            <select name="NSRZT">
             <option value="">
             </option>
             <c:forEach items="${nsrztInfoList}" var="info">
              <c:if test="${info.NSRZTDM==NSRZT}">
               <option value="${info.NSRZTDM}" selected="selected">
                ${info.NSRZTMC}
               </option>
              </c:if>
              <c:if test="${info.NSRZTDM!=NSRZT}">
               <option value="${info.NSRZTDM}">
                ${info.NSRZTMC}
               </option>
              </c:if>
             </c:forEach>
            </select>
           </td>
          </tr>

          <tr>
           <td>
            查询核定类型:
           </td>
           <td>
            <!--<select name="POSITION">
             <c:choose>
              <c:when test="${POSITION==null||POSITION==''}">
               <option value="" selected="selected">
               </option>
              </c:when>
              <c:otherwise>
               <option value="">
               </option>
              </c:otherwise>
             </c:choose>
             <c:forEach items="${hdlxInfoList}" var="info">
              <c:if test="${info.POSITION==POSITION}">
               <option value="${info.POSITION}" selected="selected">
                ${info.XLMC}
               </option>
              </c:if>
              <c:if test="${info.POSITION!=POSITION}">
               <option value="${info.POSITION}">
                ${info.XLMC}
               </option>
              </c:if>
             </c:forEach>
             <input type="text" name="POSITION" listItem="${hdlxInfoList}">
            </select>-->
            
            <select id="POSITION" name="POSITION" multiple="multiple" width="100">
             <option value="">
              全选择
             </option>
             <c:forEach items="${dlInfoList}" var="dlInfo">
              <optgroup label="${dlInfo.DLMC}">
               <c:forEach items="${hdlxInfoList}" var="info">
                <c:if test="${info.DLBM==dlInfo.DLBM}">
                 <option value="${info.POSITION}">
                  ${info.XLMC}
                 </option>
                </c:if>
               </c:forEach>
              </optgroup>
             </c:forEach>
            </select>
           </td>
           <td>
            是否核定:
           </td>
           <td>
            <select name="ISCHECK">
             <option value=""></option>
             <option value="1">
              是
             </option>
             <option value="0">
              否
             </option>
            </select>
           </td>
           <td>
            税务机关:
           </td>
           <td>
            <select name="SWJGZZJGDM">
             <c:choose>
              <c:when test="${SWJGZZJGDM==null||SWJGZZJGDM==''}">
               <option value="" selected="selected">
               </option>
              </c:when>
              <c:otherwise>
               <option value="">
               </option>
              </c:otherwise>
             </c:choose>
             <c:forEach items="${swjgInfoList}" var="info">
              <c:if test="${info.SWJGZZJGDM==SWJGZZJGDM}">
               <option value="${info.SWJGZZJGDM}" selected="selected">
                ${info.JC}
               </option>
              </c:if>
              <c:if test="${info.SWJGZZJGDM!=SWJGZZJGDM}">
               <option value="${info.SWJGZZJGDM}">
                ${info.JC}
               </option>
              </c:if>
             </c:forEach>
            </select>
           </td>
          </tr>

          <tr>
           <td>
            登记注册类型:
           </td>
           <td>
            <select name="DJZCLXDM">
             <c:choose>
              <c:when test="${DJZCLXDM==null||DJZCLXDM==''}">
               <option value="" selected="selected">
               </option>
              </c:when>
              <c:otherwise>
               <option value="">
               </option>
              </c:otherwise>
             </c:choose>
             <c:forEach items="${djzclxInfoList}" var="info">
              <c:if test="${info.DJZCLXDM==DJZCLXDM}">
               <option value="${info.DJZCLXDM}" selected="selected">
                ${info.DJZCLXMC}
               </option>
              </c:if>
              <c:if test="${info.DJZCLXDM!=DJZCLXDM}">
               <option value="${info.DJZCLXDM}">
                ${info.DJZCLXMC}
               </option>
              </c:if>
             </c:forEach>
            </select>
           </td>
           <td>
            国家标准行业:
           </td>
           <td>
            <select name="GJBZHYDM">
             <c:choose>
              <c:when test="${GJBZHYDM==null||GJBZHYDM==''}">
               <option value="" selected="selected">
               </option>
              </c:when>
              <c:otherwise>
               <option value="">
               </option>
              </c:otherwise>
             </c:choose>
             <c:forEach items="${gjbzhyInfoList}" var="info">
              <c:if test="${info.GJBZHYDM==GJBZHYDM}">
               <option value="${info.GJBZHYDM}" selected="selected">
                ${info.GJBZHYMC}
               </option>
              </c:if>
              <c:if test="${info.GJBZHYDM!=GJBZHYDM}">
               <option value="${info.GJBZHYDM}">
                ${info.GJBZHYMC}
               </option>
              </c:if>
             </c:forEach>
            </select>
           </td>
           <td>
            <input type="button"
             value="查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;询"
             οnclick="qry()" class="button01">
           </td>
           <td>
            &nbsp;&nbsp;&nbsp;&nbsp;
           </td>
          </tr>
         </table>
        </td>
       </tr>
       <tr>
        <td height="10"></td>

       </tr>
       <tr>
        <td>
         <table width="98%" align="center" border="0" cellpadding="0"
          cellspacing="0">
          <tr>
           <td>
            <iframe style="width: 100%" frameborder=0 name="listFrame"
             id="listFrame" src="<%=path%>/back.jsp" scrolling="no"></iframe>
           </td>
          </tr>
         </table>
         <input type="hidden" name="SYSMKBH" value="${SYSMKBH }" />

        </td>
       </tr>

      </table>
     </td>
    </tr>
   </table>

  </form>
 </body>
 <script language="javascript" type="text/javascript">
  //查询
  function qry(){
   document.formCondition.submit(); 
  }
 </script>
</html>
注意：页面导入的库，这个版本的下拉框架样式，在ie中存在问题，最好去下载新版本的。

java后台得到jsp提交的多选数据：

String [] positions= getRequest().getParameterValues("POSITION");

 

加贝氏_usun
关注
专栏目录
多选下拉菜单 html,一个简单的jquery的多选下拉框(自写)
weixin_34552443的博客
06-09 1107
今天做的项目要用到多选的下拉框，开始想在网上找一个插件用用，可是，网上的插件看起来都比较杂乱，我参考了网上的一些插件，自己用jquery写了一个多选下拉框，js写得比较简洁。代码如下。js代码(function(){$.fn.extend({checks_select: function(options){jq_checks_select = null;$(this).click(function...
html 下拉框中添加多选框_HTML常用标签
weixin_33603316的博客
01-20 6037
1.a 标签的用法a标签为链接标签，可以跳转到某个网页或者自己定义的hmtl中主要的属性：（一）href全称：hyper refrenece 即超级链接。可填写链接 用于跳转网页javascript:: 什么都不会发生 可填写id 用于跳转至当前id的位置xxx.html 用于跳转至htmlmailto：邮箱 用于跳转至邮箱tel:电话 ...
html多选下拉框 ，CheckBox的Select组件 可多选的下拉框
04-09
html多选下拉框 ，CheckBox的Select组件。可多选的下拉框。
[html] 制作一个多选的下拉框
歌谣的博客
03-09 894
[html] 制作一个多选的下拉框 定义盒子 a标签 绑定事件 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
html怎么写下拉选择框
最新发布
m0_65659549的博客
05-03 1705
代表下拉列表中的一个选项。在实际应用中，你可以根据需要添加更多选项，并根据实际情况调整。在HTML中创建下拉选择框，通常使用。
html-下拉框多选
XJ1551147160的博客
11-15 3141
下拉框多选
下拉多选框
qq_42339484的博客
03-28 332
1.最终结果 2.jsp代码 <tr> <td>公告接收:</td> <td> <input type="radio" id="allreceive" name="allreceive" value="1">所有人 <input type="radio" id="a...
使用bootstrap实现多选下拉框
04-23
在Bootstrap中实现多选下拉框可以极大提升用户体验，使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先，确保你已经在你的项目中引入了Bootstrap的相关资源。...
layui多选下拉框样式，整套layui-select-multiple
12-09
综上所述，Layui的“layui-select-multiple”提供了一整套美观且功能丰富的多选下拉框解决方案，适合HTML5项目，能够帮助开发者快速构建具有出色用户体验的Web应用。其样式可定制，组件API易用，使得在网页中实现...
layui-多选下拉框-xm-select-demo源码
10-10
在“layui-多选下拉框-xm-select”中，源码主要分为两大部分：HTML结构和JavaScript控制。HTML部分主要构建了下拉框的基础结构，包括选择器的容器、触发下拉的按钮以及隐藏的多选选项列表。JavaScript部分则是实现...
JS多选下拉框_实现多项选择
11-19
JS多选下拉框，实现多选。点击显示下拉。
多选下拉菜单控件（HTML)
01-12
HTML的多选下拉菜单控件，适合B/S开发
html分组多选单选下拉框.rar
12-31
html分组多选单选下拉框
select多选下拉框美化
08-19
"select多选下拉框美化"这个主题就是关于如何使用JavaScript库jQuery（jq）和CSS技术来提升HTML原生select元素的视觉效果和交互体验。下面我们将深入探讨这个话题。 首先，原生的HTML select元素在不同浏览器上展示...
HTML下拉框多选
热门推荐
White feathe 的博客
02-26 2万+
HTML下拉框多选<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C
html中多选框list,checkboxlist 下拉框多选功能
weixin_39710594的博客
06-03 1815
点击文本框，弹出一个下拉框，实现多选功能。先看下效果图： HTML页：下拉框实现多选/*说明：由于CheckBoxList 值是在后台绑定的，前台没有设置value，所有当用js取checkbox的value值时，默认都为on。在后台可以正常访问，解决方案：暂无。*/$(function() {$("#txtList").mouseenter(function() {$("#divChkList"...
html具有多选下拉的table控件,如何实现DropDownList下拉多选功能?
weixin_39953481的博客
06-04 323
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.MobileControls;using System.Data;public partial...
html下拉框 multiple,多选下拉控件的使用（select-option）multiple-select
weixin_39548787的博客
06-08 4236
多选下拉控件的使用(select-option)1、第一个组件是写bootstrap table的主人公2、第二个组件本篇中使用的是第一个控件来实现多选下拉框：首先引入支持文件multiple-select.js，multiple-select.css，multiple-select.png支持过滤，启用，禁用，分组，功能还是比较全面html片段：example:January...Decembe...
html-下拉列表多选
qq_22553739的博客
01-12 5786
下拉列表多选 <!-- multiple表示下拉列表支持多选 size是设置下拉列表一次最多显示的条目数量 --> <select name="" size="" multiple> <option value=""></option> <option value=""></option> <option value=""></option> </select> file控件 <!--后
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值