關(guān)于運(yùn)用jQuery實(shí)現(xiàn)點(diǎn)擊圖標(biāo)展示下拉選擇框

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

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到荔灣網(wǎng)站設(shè)計(jì)與荔灣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋荔灣地區(qū)。

*{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請(qǐng)選擇/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();

})

//判斷點(diǎn)擊其他地方時(shí)候下拉列表隱藏

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

var?target=$(e.target);//該點(diǎn)擊目標(biāo)對(duì)象

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實(shí)現(xiàn)下拉多選需要哪些js和css

jquery 獲取select多選下拉框所有選項(xiàng)的值可以如下實(shí)現(xiàn)

var?all?=?"";

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

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

});

而值獲取被選中的值可用如下代碼實(shí)現(xiàn)

$("select").val();

下面給出實(shí)例代碼：

創(chuàng)建Html元素：一個(gè)多選列表和一個(gè)按鈕

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="點(diǎn)擊顯示選擇的項(xiàng)目"

簡(jiǎn)單設(shè)置一下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代碼：實(shí)現(xiàn)獲取所有值和獲取選中值

$(function(){

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

var?all?=?"";

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

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

});

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

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

});

})

觀察效果

jquery下拉列表選擇問(wèn)題

!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*資質(zhì)版本/td

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

/td

/tr

tr

td*行業(yè)分類/td

tdselect?multiple="multiple"

option?value="old"舊版/option

option?value="new"新版/option

/select?select?multiple="multiple"

option建設(shè)工程企業(yè)資質(zhì)標(biāo)準(zhǔn)/option

option工程設(shè)計(jì)企業(yè)資質(zhì)標(biāo)準(zhǔn)/option

option工程勘察企業(yè)資質(zhì)標(biāo)準(zhǔn)/option

option工程監(jiān)理企業(yè)資質(zhì)標(biāo)準(zhǔn)/option

/select

button搜索分類/button/td

/tr

/table

/body

/html

“jquery”中怎么讓下拉框不能選擇？

使用jquery動(dòng)態(tài)的設(shè)置下拉框不能選擇可以使用jquery的attr方法給select控件添加disabled屬性，由于即使是被禁止選擇了，下拉框還是會(huì)顯示白色，這樣可能會(huì)讓用戶產(chǎn)生 誤解，可以再加上一個(gè)灰色的背景色，具體實(shí)現(xiàn)代碼如下：

HTML

!DOCTYPE html

html

head

meta charset="UTF-8"

title如何設(shè)置select下拉禁止選擇/title

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

script

$(function(){ ? ? ? ? ? ? ? });

/script

/head

body

select id="sel"

option value="1"項(xiàng)目經(jīng)理/option

option value="2"總經(jīng)理/option

option value="3"技術(shù)經(jīng)理/option

option value="4"部門經(jīng)理/option

/select

/body

/htmlJavaScript

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

效果圖：

jquery 怎樣獲取select多選下拉框所有選項(xiàng)的值

.val()函數(shù)獲取select的屬性。語(yǔ)法：

$(selector).val(value)

val() 方法返回或設(shè)置被選元素的值。元素的值是通過(guò) value 屬性設(shè)置的。該方法大多用于 input 元素。如果該方法未設(shè)置參數(shù)，則返回被選元素的當(dāng)前值。

一、創(chuàng)建一個(gè)select元素：

二、創(chuàng)建如下獲取屬性函數(shù)：

三、結(jié)果獲取：

擴(kuò)展資料：

通過(guò)?.val()?方法從 textarea 元素中取得的值是不含有回車（\r）字符的。但是如果該值是通過(guò) XHR 傳遞給服務(wù)器的，回車（\r）字符會(huì)被保留（或者是被瀏覽器添加的，但是在原始數(shù)據(jù)中并不包含回車（\r））。可以使用下面的 valHook 方法解決這個(gè)問(wèn)題：

參考資料：jQuery API 中文文檔 --.val()

網(wǎng)頁(yè)標(biāo)題：jquery下拉選擇,jquery給下拉框添加選項(xiàng)
鏈接地址：http://chinadenli.net/article43/dsgidhs.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、定制開發(fā)、App設(shè)計(jì)、靜態(tài)網(wǎng)站、網(wǎng)站營(yíng)銷、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)