Question

如果我点击标签，我想打开选择按钮

这是代码

<label>sachin</label>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

在css或jquery中有什么办法吗？我不确定这件事。

小提琴：http://jsfiddle.net/Yh3Jf/

Answer 1

这里不需要javascript，只需使用CSS设置样式并使用指针事件：

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

并且相对CSS是

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

这是一个丑陋的小提琴样本：https://jsfiddle.net/1rofzz89/

Answer 2

错误的家伙;获取本机选择列表只需在鼠标下创建一个隐形克隆：

$("label").mouseover(function(){
    var $this = $(this);
    var $input = $('#' + $(this).attr('for')); 
    if ($input.is("select") && !$('.lfClon').length) {
        var $clon = $input.clone();
        var getRules = function($ele){ return {
            position: 'absolute',
            left: $ele.offset().left,
            top: $ele.offset().top,
            width: $ele.outerWidth(),
            height: $ele.outerHeight(),
            opacity: 0,
            margin: 0,
            padding: 0
        };};
        var rules = getRules($this);
        $clon.css(rules);
        $clon.on("mousedown.lf", function(){
            $clon.css({
                marginLeft: $input.offset().left - rules.left,
                marginTop: $input.offset().top - rules.top,
            });
            $clon.on('change blur', function(){
                $input.val($clon.val()).show();
                $clon.remove();
            });
            $clon.off('.lf');
        });
        $clon.on("mouseout.lf", function(){
            $(this).remove();
        });
        $clon.prop({id:'',className:'lfClon'});
        $clon.appendTo('body');
    }
});

在IE10，Chrome 27和Firefox 22上进行了测试

演示：http://jsfiddle.net/Yh3Jf/24/

Answer 3

你想做这样的事吗？ http://jsfiddle.net/Yh3Jf/6/

    <label id="l">sachin</label>
    <select id="s">
        <option>1</option>
        <option>2</option>        
        <option>3</option>
        <option>4</option>
   </select>  

$("#l").click(function () {
    var size = $('#s option').size();
    if (size != $("#s").prop('size')) {
        $("#s").prop('size', size);
    } else {
        $("#s").prop('size', 1);
    }
})

Answer 4

如果您只是想要专注于选择框（从而允许您向上和向下箭头），您可以使用类似的东西......

<label for="sel">sachin</label>
<select id="sel">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

Answer 5

如果其他人正在搜索此内容，我会通过扩展 <select> 标记的填充并使标签定位为绝对来实现此行为。

<div class="field-select">
  <label class="field-select__label" for="selector">Clickable Label</label>
  <select class="field-select__input" id="selector" name="selector">
    <option value="val1">value 1 </option>
    </option><option value="val2">Value 2</option>
  </select>
</div>


.field-select {
  position: relative;
}

.field-select__label {
  position: absolute;
  pointer-events: none;
  top: 5px;
  left: 0;
}

.field-select__input {
  padding: 50px 50px 20px 10px;
}

检查 codepen 上的工作示例

Answer 6

不幸的是，它可能会使用任何类型的代码来显示本机选择下拉列表。

但是我看到人们使用背景图像，然后弹出选择（查看Mightydeals.com）

如果没有解析为jquery和一些html来产生效果。

一旦我点击标签选择按钮应该打开

6 个答案: