关于运用jQuery实现点击图标展示下拉选择框

style type="text/css" media="screen"

站在用户的角度思考问题，与客户深入沟通，找到荔湾网站设计与荔湾网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖荔湾地区。

*{margin:0;padding:0;}

body{font-size: 16px;color: #000;padding: 50px;}

.dowebok dl{position: relative;width: 180px;}

.dowebok dl dt{border:#ddd solid 1px;height: 28px;line-height: 28px;font-size: 14px;padding-left: 5px;overflow: hidden;}

.dowebok dl dt b{display: block;position: absolute;top: 5px;right:15px;width: 10px;height: 10px;border:#333 solid 1px;border-width: 0 0 1px 1px;transform:rotate(-45deg);}

.dowebok dl dd{position: absolute;width: 100%;left: 0px;top: 30px;border:#ddd solid 1px;border-top:0px;box-sizing: border-box;display: none;}

.dowebok dl dd span{display: block;height: 30px;line-height: 30px;text-align: center;font-size: 14px;color: #666;background: #fff;}

.dowebok dl dd span:hover{background-color: #139ff1;}

/style

div class="dowebok"

dl

dtspan请选择/spanb/b/dt

dd

span天津/span

span杭州/span

span北京/span

/dd

/dl

/div

script

$(function(){

$('.dowebok dl dt').click(function(){

$(this).siblings('dd').toggle();  //下拉隐藏显示

})

$('.dowebok dl dd span').click(function(){

var html = $(this).html();

$('.dowebok dl dt').find('span').html(html);

$('.dowebok dl dd').hide();

})

//判断点击其他地方时候下拉列表隐藏

$("body,html").on("mousedown",function(e){

var target=$(e.target);//该点击目标对象

if(!(target.closest(".dowebok dl dd").length)  !(target.closest('.dowebok dl dt').length)  !(target.closest(self).length)  $(".dowebok dl dd").is(":visible")){

$(".dowebok dl dd").css({"display":"none"});

}

})

});

/script

使用jquery实现下拉多选需要哪些js和css

jquery 获取select多选下拉框所有选项的值可以如下实现

var all = "";

$("select option").each(function() {

all += $(this).attr("value")+" ";

});

而值获取被选中的值可用如下代码实现

$("select").val();

下面给出实例代码：

创建Html元素：一个多选列表和一个按钮

select id="multi-sel" multiple="multiple"

option value="1"萝卜，我的value是1/option

option value="2"青菜，我的value是2/option

option value="3"小葱，我的value是3/option

option value="4"豆腐，我的value是4/option

/select

input type="button" value="点击显示选择的项目"

简单设置一下css样式

select{width:200px;height:150px;padding:10px;border:4px dashed #ccc;}

select option{margin:5px;}

input[type='button']{width:200px;height:35px;margin:10px;border:2px dashed #ebbcbe;}

编写jquery代码：实现获取所有值和获取选中值

$(function(){

$("input:button").click(function() {

var all = "";

$("select option").each(function() {

all += $(this).attr("value")+" ";

});

var sel = $("select").val();

alert("多选列表所有的value值:"+all+"，其中被选中的是:"+sel+"。");

});

})

观察效果

jquery下拉列表选择问题

!DOCTYPE HTML

html lang="en-US"

head

meta charset="UTF-8"

titlemenu/title

style type="text/css"

/style

script type="text/javascript" src="jquery-1.8.0.min.js"/script

script type="text/javascript"

$ (function ()

{

$ (":radio").change (function ()

{

$("select:first").val($(this).val());

$("select:first").triggerHandler('change');

});

$("select:first").change (function ()

{

var index = $(this).children("option:selected").index();

if (index == 1)

{

$("select:last option:nth-child(2n+1)").prop("selected", false);

$("select:last option:nth-child(2n)").prop("selected", true);

}

else

{

$("select:last option:nth-child(2n)").prop("selected", false);

$("select:last option:nth-child(2n+1)").prop("selected", true);

}

})

})

/script

/head

body

table

tr

td*资质版本/td

tdlabelinput type="radio" name="version" value="old" /旧版 /label labelinput type="radio" name="version" value="new" /新版 /label

/td

/tr

tr

td*行业分类/td

tdselect multiple="multiple"

option value="old"旧版/option

option value="new"新版/option

/select select multiple="multiple"

option建设工程企业资质标准/option

option工程设计企业资质标准/option

option工程勘察企业资质标准/option

option工程监理企业资质标准/option

/select

button搜索分类/button/td

/tr

/table

/body

/html

“jquery”中怎么让下拉框不能选择？

使用jquery动态的设置下拉框不能选择可以使用jquery的attr方法给select控件添加disabled属性，由于即使是被禁止选择了，下拉框还是会显示白色，这样可能会让用户产生 误解，可以再加上一个灰色的背景色，具体实现代码如下：

HTML

!DOCTYPE html

html

head

meta charset="UTF-8"

title如何设置select下拉禁止选择/title

script src="../js/jquery-1.12.4.js"/script

script

$(function(){               });

/script

/head

body

select id="sel"

option value="1"项目经理/option

option value="2"总经理/option

option value="3"技术经理/option

option value="4"部门经理/option

/select

/body

/htmlJavaScript

$("#sel").attr("disabled","disabled").css("background-color","#EEEEEE;");

效果图：

jquery 怎样获取select多选下拉框所有选项的值

.val()函数获取select的属性。语法：

$(selector).val(value)

val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。

一、创建一个select元素：

二、创建如下获取属性函数：

三、结果获取：

扩展资料：

通过 .val() 方法从 textarea 元素中取得的值是不含有回车（\r）字符的。但是如果该值是通过 XHR 传递给服务器的，回车（\r）字符会被保留（或者是被浏览器添加的，但是在原始数据中并不包含回车（\r））。可以使用下面的 valHook 方法解决这个问题：

参考资料：jQuery API 中文文档 --.val()