正文
jquery下拉选择,jquery给下拉框添加选项
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
关于运用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
相关问答
Q1: 使用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+"。");
});
})
观察效果
Q2: 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
Q3: “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;");
效果图：
Q4: jquery 怎样获取select多选下拉框所有选项的值
.val()函数获取select的属性。语法：
$(selector).val(value)
val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。
一、创建一个select元素：
二、创建如下获取属性函数：
三、结果获取：
扩展资料：
通过 .val() 方法从 textarea 元素中取得的值是不含有回车（\r）字符的。但是如果该值是通过 XHR 传递给服务器的，回车（\r）字符会被保留（或者是被浏览器添加的，但是在原始数据中并不包含回车（\r））。可以使用下面的 valHook 方法解决这个问题：
参考资料：jQuery API 中文文档 --.val()
