jq点击下拉菜单代码（js点击下拉框）[20240419更新]

本篇文章给大家谈谈jq点击下拉菜单代码，以及js点击下拉框对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、关于运用jQuery实现点击图标展示下拉选择框
• 2、jq 点击搜索 下拉框 多选 变成数组（类似百度“添加标签”功能）
• 3、如何通过JQUERY获得下拉框的显示值
• 4、jQuery触发下拉框单击事件。
• 5、利用jq实现下拉菜单

关于运用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

jq 点击搜索 下拉框 多选 变成数组（类似百度“添加标签”功能）

提供一个思路，，在你添加完成后，为其中的每个span标签绑定事件，

$("#addTagDiv").html(a+"span class='spanTag'"+$("#textAdd").val()+"/span");

//添加完成后重新绑定事件，我写的是click,悬停貌似是mouseover

$(".spanTag").click(function(){

alert($(this).text());//$(this)就是你当前的span了

});

如果有更好的思路，欢迎补充

如何通过JQUERY获得下拉框的显示值

通过获取元素的text实现功能。关键的两个jquery函数为：

$("select").val();  // 选中项目的value值。

$("select option:checked").text(); // 选中项目的显示值。

实例演示如下：

1、设计简单的一个下拉框代码，包括【男】【女】两个值。代码如下：

此时页面展示效果如下：

2、设计一个函数，通过点击按钮，将当前选中的下拉框的值和显示的文字，都选取出来，并分别赋值给两个input，函数代码如下：

此时，选取男，然后点击，展示效果如下：

如果选择女，展示效果如下：

扩展资料：

带有预先选定的选项的下拉列表：HTML option 标签的 selected 属性。

定义和用法：

selected 属性规定在页面加载时预先选定该选项。被预选的选项会显示在下拉列表最前面的位置，也可以在页面加载后通过 JavaScript 设置 selected 属性。

实例：

select

optionVolvo/option

option selected="selected"Saab/option

optionMercedes/option

optionAudi/option

/select

jQuery触发下拉框单击事件。

按钮触发下拉框单击事件

script

$(document).ready(function(){

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

$("select").val("123");

});

});

/script

trigger触发select下拉框

请求写在文档就绪函数里面，$('#typeId').trigger('change');用于页面载入的时候自动触发select的onchange事件 。

如果要使得select的option为某一个value的选项被触发的话，可用用这一句$('#typeId').val(saveValue).trigger('change');其中saveValue为value值。

$(function () {

// 初始化频道

$.ajax({

url: "/channel/first.ajax",

type: "get",

async: false,

dataType: 'json',

success: function (e) {

if (e.status.code == 0) {                    for (var i = 0; i e.data.length; i++) {

$('#typeId').append('option value="' + e.data[i].id + '"' + e.data[i].name + '/option');

/* $("option/option").val(e.data[i].id).text(e.data[i].name).appendTo($('#typeId'));*/

}

$('#typeId').trigger('change');

}

},

error: function () {

}

});

});                       

利用jq实现下拉菜单

如果是jq实现折叠列表的话 很简单！

$(.list li).click(function(){

$(this).addClass("Gd").siblings(".Gd").removeClass();

$(this).next(".box").toggle(300);

});

以上代码解释：

如果的li点击打开box这个class你的li就会添加一个Gd

接下来使用Gd这个class来控制你的箭头就好了

你必要写的那么复杂别没必要使用.ep来判断位置

关于jq点击下拉菜单代码和js点击下拉框的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。