我想打開選擇按鈕,如果我的標籤上單擊,一旦我的標籤上點擊選擇按鈕應該得到開放
這裏是代碼
<label>sachin</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
有在CSS或jQuery的什麼辦法?我不確定這件事。
小提琴:http://jsfiddle.net/Yh3Jf/
我想打開選擇按鈕,如果我的標籤上單擊,一旦我的標籤上點擊選擇按鈕應該得到開放
這裏是代碼
<label>sachin</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
有在CSS或jQuery的什麼辦法?我不確定這件事。
小提琴:http://jsfiddle.net/Yh3Jf/
你想要做這樣的事? 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);
}
})
精湛的夥計。那就是我究竟想要的 – supersaiyan 2013-03-07 05:37:37
不幸的是,研究所可以使用任何類型的代碼有本地選擇下拉列表顯示出來。
但我看到有人用backgrond圖像,然後選擇彈出,(檢查Mightydeals.com)
如果不解決對jQuery和一些HTML產生的效果。
如果你只是想獲得重點選擇框(從而使您能夠箭頭向上和向下),你可以使用類似...
<label for="sel">sachin</label>
<select id="sel">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
不,我想打開它 – supersaiyan 2013-03-06 14:33:21
錯的傢伙;獲得本機選擇列表只是讓鼠標在一個看不見的克隆:
$("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
IMO這應該是被接受的答案 – 2015-06-08 19:29:22
太過進取,克隆一個dom對象有很多意想不到的結果 – Ayyash 2017-04-29 17:13:19
@Ayyash有什麼意外的結果?顯然你應該在實現它之後測試一切仍然有效。無論如何,如果你想要一個不那麼「積極」的方式,你總是可以在HTML本身(沒有JS)中複製
無需對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/
這是真棒回答沒有jQuery黑客 – Gags 2016-04-29 04:57:48
現在,我們不能。最好的解決方案是使用jQuery dropdownlist創建自己的下拉列表。 轉到http://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery 這裏有一些插件可以幫助你 http://www.jquery4u.com/插件/ 10-jquery-selectboxdrop-down-plugins/ – JoDev 2013-03-06 14:32:54
我不認爲這是可能的。您可以*選擇標籤,但不會擴展。我認爲這取決於操作系統。 – 2013-03-06 14:33:06