[英]HTML Select change event fires on scroll bar click in Chrome when select tag has a size attribute
[英]How to change “size” of select when click on select?
对不起,我的英语不好,我对select
有问题:
<form name="reg" style="width:700px;" action="#" method="post">
<p align="center">
<select onChange="reg(this.options[this.selectedIndex].value)" size="1">
<option selected value="250">Select the Reg</option>
<option value="0">Reg 1</option>
<option value="1">Reg 2</option>
<option value="2">Reg 3</option>
<option value="3">Reg 4</option>
<option value="4">Reg 5</option>
<option value="5">Reg 6</option>
<option value="6">Reg 7</option>
<option value="7">Reg 8</option>
<option value="8">Reg 9</option>
<option value="9">Reg 10</option>
</select>
</p>
</form>
我想当我单击select时,select的大小将更改为size="5"
,因为在文档加载时,大小为size="1"
(这很好),但是如果我单击select,它将显示所有十个选项,这就是问题所在...而如果我单击“选择”,则大小会更改,这是最漂亮的。
编辑将来,表单可能会有250个以上的选项,因此重要的是,当文档加载大小为1时 ,当我单击大小为5 .... 仅当选择显示选项时,大小必须为“ 5”,并且选择一个选项时,大小必须为1。
问题是我不知道怎么做,也许用jQuery? 或仅使用CSS?
你能帮助我吗?
谢谢!
这是您问题的可行解决方案:
https://jsfiddle.net/juaxo8zm/8/
$(document).ready(function () {
var initPos = $("#yourDiv").position();
console.log("init: ");
console.log(initPos);
$('#selRegs').focus(function () {
$('#selRegs').attr("size", "6");
$("#yourDiv").css({
position: "absolute",
top: initPos.top,
left: initPos.left
});
});
$('#selRegs').change(function () {
console.log("selected");
$('#selRegs').attr("size", "1");
$("#selRegs").blur();
$("#yourDiv").css({
position: "static"
});
});
});
我为此使用jQuery:
使用HTML select标记中的HTML onclick =“ myFunction()”事件标记,或者如果您想在javascript级别声明事件处理程序,则使用jQuery click()处理程序(我的意思是如果您想从javascript中添加其他事件) 。 我的意思是您可以选择-在HTML标记源代码中添加额外的事件分发代码,或者从javascript / jQuery级别添加它。
问题在于,直到满足您的需求时才调用onChange()
事件调度( 在用户选择一个值之后调用)。
单击下拉菜单的按钮时,您需要获得通知,以便可以更改所选值(默认值)。
在点击函数处理程序中,更改selectedIndex属性并将其设置为包含“ 5”的行的索引
您应该在选择时使用点击事件
$('select').on('click',function(){
$(this).attr('size',5)
});
尝试这个:
<select size="1"
onfocus='this.size=5;'
onblur='this.size=1;'
onchange='this.size=1; this.blur();'
>
只需使用javascript:
<select id='sel' onfocus='changesize();' onchange='changesize2();' size='1'>
<option selected value="250">Select the Reg</option>
<option value="0">Reg 1</option>
<option value="1">Reg 2</option>
<option value="2">Reg 3</option>
<option value="3">Reg 4</option>
<option value="4">Reg 5</option>
<option value="5">Reg 6</option>
<option value="6">Reg 7</option>
<option value="7">Reg 8</option>
<option value="8">Reg 9</option>
<option value="9">Reg 10</option>
</select>
<script>
function changesize(){
document.getElementById('sel').size = '5';
}
function changesize2(){
document.getElementById('sel').size = '1';
document.getElementById('sel').blur();
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.