我正试图让一个select
框在用户盘旋时自动弹出,就像他们点击了它一样。这可能吗?
我认为我可以使用jQuery轻松完成这个......
$("#settings-select").mouseover(
function(){
$(this).trigger("click");
}
);
但这没有任何作用。有什么想法吗?
答案 0 :(得分:10)
我终于有了这个工作!你需要Chosen;正如其他人所指出的那样,你不能用正常的select
做到这一点,因为没有可用的事件。但是当你鼠标悬停在select
上时会弹出菜单并在你鼠标移开时关闭它,这就是我想要的确切效果。
HTML:
<select id="dropdown" data-placeholder="Choose…">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>
JS:
$("#dropdown").chosen().next(".chzn-container").hover(
function(){
$("#dropdown").trigger("liszt:open");
},
function(){
$(this).trigger("click");
}
);
$("#dropdown").trigger("liszt:open");
打开菜单。当你想关闭它时,没有相应的liszt:close
事件触发(据我所知),但触发click
会产生相同的效果。
答案 1 :(得分:4)
已经有一段时间但有一个我在这里看不到的解决方案,使用hover
来更改select
的长度:
$('select').hover(function() {
$(this).attr('size', $('option').length);
}, function() {
$(this).attr('size', 1);
});
http://codepen.io/anon/pen/avdavQ
这里有一支钢笔,它不仅仅是必需品,还有一些造型:
答案 2 :(得分:2)
trigger只调用通过jQuery的一个绑定函数绑定的函数。
没有跨浏览器的方式来打开javascript中的select(可能可以在某些版本的IE上调用this.click()
但是我无法测试,而且我'我确定其他浏览器没办法了。)
答案 3 :(得分:0)
这是不可能的。您只能实现自己的选择框或Chosen插件,但这对可用性不利。还要考虑trigger('focus')
。
答案 4 :(得分:0)
不幸的是,选择方法 - 对我来说不起作用。
但我想我可以在jQuery上创建自己的选择器。
HTML:
<div class='select'>
<p class='input'>Select option</p>
<input type='hidden' name='some_name_to_form' />
<div class='hidden'>
<p value='id_1' >option long value</p>
<p value='id_2' >option 2</p>
<p value='id_3' >option 3</p>
</div>
</div>
JS:
$('.hidden p').click(function(){
$(this).closest('.select').find('.input').text($(this).text());
$(this).closest('.select').find('input').val($(this).attr('value'));
$(this).closest('.select').trigger("change");
});
$('.select').change(function(){
// ... do stuff
});
答案 5 :(得分:0)
工作示例
$(function(){
$(".chosen-select").chosen();
$(".chosen-container-single").hover(function(){
$(this).addClass("chosen-with-drop");
$(this).addClass("chosen-container-active");
$('.chosen-select').trigger("chosen:open");
},function(){
$(this).removeClass("chosen-with-drop");
$(this).removeClass("chosen-container-active");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<div>
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="4">
<option value=""></option>
<option value="Any">[Any]</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
</select>
</div>