基于jquery实现的可以编辑选择的下拉框的代码

2024-09-28 13:57:51

效果图：

代码如下：

代码如下:

<!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>
<title>可以编辑的下来框实现方法--woody.wu</title>
<style type="text/css">
.cssINPUT
{
height: 19PX;
padding: 3PX;
padding-left: 3px;
padding-right: 0px;
margin: 0PX;
border: 1PX SOLID #C0C0C0;
font-family: 宋体,arial;
font-size: 9pt;
}
.select_div_list
{
position: absolute;
border: 1px solid black;
background-color: White;
overflow: hidden;
overflow-y: auto;
}
.select_div_list_ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.select_div_list_ul li
{
cursor: pointer;
padding-left: 3px;
font-family: 宋体,arial;
font-size: 9pt; *padding:0px;*height:20px;_height:14px;_margin:0px;_height:14px;*margin:0px;line-height:14px;}
.selectSPAN
{
background-color: Yellow;
}
</style>
<script type="text/javascript" src="Js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var inputID = "input1";
var selectID = "select1";
var widt = 0;
var inputWi = 0;
var he = 0;
$(function() {
inputID = "input1";
selectID = "select1";
widt = 200;
inputWi = widt - 20;
he = $("#user").height() - 41;
var offset = $("input[id=input1]").offset();
$("#" + selectID).change(function() {
var newvar = $("#" + selectID).find("option:selected").text();
$("#" + inputID).val(newvar);
}).click(function() {
$("#select_div_on_key" + selectID).remove();
}).css({ "display": "block", "width": widt + "px", "z-index": 1, "clip": "rect(0px " + widt + "px 51px 151px)" });
$("#" + inputID).keyup(function() {
ShowSelectCombo();
}).click(function() {
ShowSelectCombo();
}).css({ "z-index": 2, "width": inputWi + "px" }); ;
});
function ShowSelectCombo() {
var pob = $("#" + inputID);
var v = pob.val();
var off = pob.offset();
var wi = pob.width() + 16;
var tp = off.top + pob.height() - 100 + 7;
var lef = off.left - 200 + 2;
var html = "<div class='select_div_list' id='select_div_on_key" + selectID + "' style='width:" + wi + "px;top:" + tp + "px;left:" + lef + "px;'><ul class='select_div_list_ul'>";
$("#" + selectID).find("option").each(function() {
var tk = $(this);
html += "<li val='" + tk.val() + "' ht='" + encodeURIComponent(tk.html()) + "'>" + tk.html().replace(v, "<span class='selectSPAN'>" + v + "</span>") + "</li>";
});
html += "</ul></div>";
var ulDIV = $("#select_div_on_key" + selectID);
ulDIV.remove();
$("#user").append(html);
var ulDIV = $("#select_div_on_key" + selectID);
var hei = ulDIV.find("ul").height();
var newHeight = hei > he ? he : hei;
ulDIV.css({ height: newHeight + "px" });
ulDIV.find("li").hover(function() {
$(this).css({ "background-color": "#316ac5" });
}, function() {
$(this).css({ "background-color": "white" });
});
ulDIV.find("li").click(function() {
var ki = $(this);
var va = ki.attr("val");
var htm = ki.attr("ht");
htm = decodeURIComponent(htm);
$("#" + inputID).val(htm);
$("#" + selectID).val(va);
ulDIV.remove();
});
}
</script>
</head>
<body>
<form name="form1" method="post" action="qqq.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIxMjQ5OTYwOTdkZH49VftoWVz/vaIL4f2byf4/w86b" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWDwL15JrvCgL2jaW0BgL3jaW0BgL0jaW0BgL1jaW0BgLyjaW0BgLzjaW0BgLwjaW0BgLujaW0BgL3jeW3BgKm4u6hCAL3je23BgL3jdG3BgL3jdW3BgL3jdm3BnqAGtu2PbiTi9dWHvWrW6QCqrYo" />
</div>
<div style='position: absolute; top: 100px; width: 500px; left: 200px; padding: 10px;
height: 400px; border: 1px solid red;' id='user'>
<div>
<div style='overflow: hidden; margin-top: 10px; height: 30px;'>
<input id="input1" name="input1" type="text" class='cssINPUT' style='_height: 20px;
*height: 13px; display: block; float: left; position: absolute; border-right: 0px;' />
<select name="select1" id="select1" class="cssINPUT" style="float: left;
display: none; height: 27PX; position: absolute; cursor: pointer; margin-left: 2px;
padding: 0px;">
<option value="1">車身和底盤修整設備</option>
<option value="2">真空吸盤</option>
<option value="3">氧/乙炔焊割工具</option>
<option value="4">冷鉚机 </option>
<option value="5">大市場撒旦</option>
<option value="6">大擦</option>
<option value="7">第三十</option>
<option value="9">大市場</option>
<option value="20">車身外形修复机（介子机）</option>
<option value="1022">沙皮狗</option>
<option value="22">整形机</option>
<option value="23">舉升机</option>
<option value="24">修車躺板</option>
<option value="25">空調制冷劑充注机 </option>
</select>
</div>
</div>
</form>
</body>
</html>

jQuery实现下拉框左右选择的简单实例

就是实现这个效果的,选中添加到右边,全部添加到右边,选中删除到左边,全部删除到左边. html部分: 复制代码代码如下: <body> <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <optio
jquery实现下拉框左右选择功能

1.说明本文demo实现下拉框左右选择 2.代码 <!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
jQuery实现下拉框选择图片功能实例

本文实例讲述了jQuery实现下拉框选择图片功能.分享给大家供大家参考.具体如下: 让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容.为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示.使用了一个jQ插件:imageselect.js,使用效果的朋友可以自己下载吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>支持图片选择的jQuery
基于jQuery的select下拉框选择触发事件实例分析

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1
jquery取消选择select下拉框示例代码

有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()"> <option value="">全部</option>
jquery仿QQ登录账号选择下拉框效果

QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示
jQuery实现下拉框左右移动（全部移动，已选移动）

用到的方法为:appendTo() 格式:$(content).appendTo(selector) appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容. click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数. 看一下具体实现的代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script
基于jquery实现的可以编辑选择的下拉框的代码

效果图: 代码如下: 复制代码代码如下: <!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> <title>
jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码代码如下: <div class="wrap"> <div class="nice-select" name="nice-select&
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑

例如"报告交付方式"包含固定交付时,第二个下拉框不可编辑,反之可以编辑,具体代码如下报告交付方式: <select class="easyui-combobox" panelHeight="auto" style="width:195px" data-options="required:true,valueField:'id',textField:'text' , onSelect:function(){ v
jquery实现适用于门户站的导航下拉菜单效果代码

本文实例讲述了jquery实现适用于门户站的导航下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款应用了jQuery+CSS共同编写实现的网页导航菜单,采用浅蓝色的布局方式,整体格调淡雅清新,简洁大方,不失为一款好菜单.本特点的特点是兼容好,在火狐/IE下都有良好表现,而且在有二级子菜单的地方,主菜单上都会有一个小三角标识,很好的提升了用户体验,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-i
基于jquery实现的可编辑下拉框实现代码

原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示这种字体,但可以通过一些其他方法实现,大家可以自己尝试下.下面是html代码 <span style="display:inline-block;positio
基于jquery的checkbox下拉框插件代码

option_check.js代码 : 复制代码代码如下: /***************************************** 调用方法为: Jselect($("#inputid"),{ bindid:'bindid', hoverclass:'hoverclass', optionsbind:function(){return hqhtml();} }); inputid为下拉框要绑定的文本框id bindid为点击弹出/收回下拉框的控件id hoverclas
jquery.multiselect多选下拉框实现代码

本文实例为大家分享了jquery.multiselect多选下拉框的实现方法,供大家参考,具体内容如下第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的基本文件都需要引用 <link rel="stylesheet" type="text/css" href="~/Scripts/jquerymult
vue+Element中table表格实现可编辑（select下拉框）

最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框:并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同:有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下: HTML代码: 1.在处理人列加入一个下拉框模板,其中v-model必须要scope.row.proJbruserValue来绑定,意思是这个值绑定到当
jquery动态加载select下拉框示例代码

如题,直接上代码,实战学习. 复制代码代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g

基于jquery实现的可以编辑选择的下拉框的代码

相关推荐

随机推荐