jQuery通过按钮打开选择 [英] jQuery open select by button

查看：16 发布时间：2022/1/1 21:29:07 jquery select triggers click

本文介绍了jQuery通过按钮打开选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何通过按钮打开选择下拉菜单?

$('button').on('click', function() {$('select').trigger('click');});

我的代码:http://jsfiddle.net/UGkWp/

更新:
我找到了 webkit 浏览器的解决方案，但只有这些浏览器:http://jsfiddle.net/UGkWp/2/ 也许你知道在每个浏览器中如何做到这一点?

解决方案

你可以像这样只用 CSS 来做到:

<身体><div class="排序"><div class="正确排序"><label><span>每页的项目数</span><选择><option value="">每页项目数</option><option value="10">10</option><option value="20">20</option><option value="40">40</option><option value="60">60</option><option value="100">100</option><option value="200">200</option></选择><span class="pointer"><i class="fa fa-caret-down"></i></span>

<风格>选择{-webkit 外观:无；外观:无；-moz-外观:无；}.排序{填充:5px 10px;边框:1px 实心 #eee;清除:两者；背景:#FFF;高度:40px；}.排序 h4{填充:4px 0 0;保证金:0;}.种类{位置:相对；填充左:10px；向左飘浮;}.sort>标签{字体粗细:正常！重要}.sort span.pointer{高度:30px；宽度:30px；左边框:1px 实心 #ddd;位置:绝对；右:0;顶部:0；文字对齐:居中；颜色:#c49633；字体大小:20px；z-索引:1；}.sort span.pointer i{边距顶部:6px;}.排序选择{填充:5px 40px 5px 10px ！重要；左边距:10px；边框:1px 实心 #eee;背景:无；高度:30px；位置:相对；z-索引:2；}</风格>

访问此小提琴了解更多详情:https://jsfiddle.net/ssjuma/1mkxw2nb/1/

How to open select dropdown by button?

$('button').on('click', function() {
   $('select').trigger('click');
});

My code: http://jsfiddle.net/UGkWp/

UPDATE:
I found solutions for webkit browsers, but only these browsers: http://jsfiddle.net/UGkWp/2/ Maybe You known how do this in each browsers?

解决方案

You can do it with only CSS like this:

<html>
<body>

<div class="sorting">
<div class="sort right"><label>
<span>Items per page</span>
    <select>
    <option value="">Items per page</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="40">40</option>
    <option value="60">60</option>
    <option value="100">100</option>
    <option value="200">200</option>
    </select>

    <span class="pointer"><i class="fa fa-caret-down"></i></span>
    </label>
    </div>
    </div>


</body>
</html>
<style>
select{
  -webkit-appearance:none;
    appearance:none;
      -moz-appearance:none;
}
.sorting{
    padding:5px 10px;
    border:1px solid #eee;
    clear:both;
  background:#FFF;
  height:40px;
}
.sorting h4{
    padding:4px 0 0;
    margin:0;
}
.sort{
    position:relative;  
    padding-left:10px;
  float:left;
}
.sort>label{
    font-weight:normal !important
}
.sort span.pointer{
    height:30px;
    width:30px;
    border-left:1px solid #ddd;
    position:absolute;
    right:0;
    top:0;
    text-align:center;
    color:#c49633;
    font-size:20px;
    z-index:1;
}
.sort span.pointer i{
    margin-top:6px;
}
.sorting select{
    padding:5px 40px 5px 10px !important;
    margin-left:10px;
    border:1px solid #eee;
    background:none;
    height:30px;
    position:relative;
    z-index:2;
}
</style>

Visit this fiddle for more details: https://jsfiddle.net/ssjuma/1mkxw2nb/1/

这篇关于jQuery通过按钮打开选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

jQuery通过按钮打开选择 [英] jQuery open select by button

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

jQuery通过按钮打开选择 [英] jQuery open select by button

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭