导航:首页 > 编程语言 > js实现滚动列表框

js实现滚动列表框

发布时间:2025-08-25 15:10:31

① 如何使用js获取下拉列表框的显示值

js获取下拉列表框文本值,例如下面的HTML代码

<selectonchange="isSelected(this.value);"id="city">
<option
value="1">北京</option>
<optionvalue="2">上海</option>

<optionvalue="2">广州</option>
</select>

也就是说当用户选择“上海”这一列时,需要将“上海”这个名称保存起来。其实方法很简单。看下面javascript代码:

functionisSelected(value){
varcityName;
varcity=
document.getElementById("city");
//获取选中的城市名称

for(i=0;i<city.length;i++){
if(city[i].selected==true){
cityName
=city[i].innerText;//关键点
alert("cityName:"+cityName);
}
}

也可以这样做:

functionisSelected(value){
varcity=document.getElementById("city");

alert(city.options[city.selectedIndex].innerText);
}

大致解释一下,首先在HTML页面上有一个下拉框,并为此下拉框定了一个“city”的id,并为其绑定了一个onchange事件,通过此事件调用javascript函数。


在javascript函数当中,通过domcument对象获取当前下拉框的节点元素,由于节点的值并非只有一个,所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中,如果选中则使用city[i].innerText
方式获取当前所选中的文本值。当然如果需要获取选项值,只需如此即可:city[i].value.


至此,通过以上方法在IE下已能达到所要的结果。但是,在FIREFOX下测试时,发现此法不起作用,最后通过查阅资料发现另外一个方法。将city[i].innerText
改为 city[i].text即可。这种方法对IE及FIXEFOX都适用!

② 关于js的onchange方法。

javascript onchange()事件:javascript onchange()事件一般用于用户表单中,例如:当文本框内容发生改变时触发的事件,或者下拉列表框内容发生改变时触发的事件等。

示例分享:onchange()事件,用户输入时,将小写字母转换为大写。

此处用到了javascript中的一个方法 toUpperCase(); //将小写母转换为大写字母。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>用户表单验证</title>
<script>
functionchangeValue(){
varuserName=document.getElementById("userName");//通过Id获得对象userName;

userName.value=userName.value.toUpperCase();//将对象的值进行大小写的转换赋值给当前对象的值;

}
</script>
</head>
<body>
<formname="myform"method="POST"action="register.php"onsubmit="returncheckForm();">
userName:<inputtype="text"name="userName"value=""id="userName"onchange="changeValue();"/><br/>
<inputtype="submit"name=""value="用户注册"/>
</form>
</body>
</html>

③ 怎样用js取得select下拉列表框内选中的option的value值呢

单选下拉列表框对象的value属性值就是选中项的value值,因此只需用如下代码即可

var selected_val = document.getElementById(select_id).value;

并且,通过操作select下的option也可以得到被选项的value值,方法为:

var sel = document.getElementById(select_id);

var selected_val = sel.options[sel.selectedIndex].value;

④ 如何控制文本框只能输入整数并且整数不能大于6,用javascript或者jquery实现,急啊,求大神帮助!

不知道楼主是要一位整数还是多位,我这个代码是多位的。如果要一位整数,楼主直接用 下拉列表框(select) 就好了。

<body>
<input type="text" id="test">
</body>
<script type="text/javascript" src="Inc/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#test").keyup(function(){
var str=$(this).val();
var newstr='';
for(i=0;i<str.length;i++){
var j=str.charCodeAt(i);
if(j>47&&j<55){ newstr+=String.fromCharCode(j); }
}
if( newstr.charCodeAt(0)==48 ){ $(this).val(newstr.substr(1,newstr.length)); }
else{ $(this).val(newstr); }
});
})
</script>

⑤ JS实现select选中option触发事件操作示例

本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考,具体如下:
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发。
想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件
又在select中添加onclick 这下可好了,没选option呢就触发了
网络来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,用过就忘是不是猪脑子.
这次记住了吧应该
当我们触发select的双击事件时,用ondblclick方法。
当我们要取得select的选中事件时,用document.all['name'].value来获取,其中name是select的名称。
如果我们要得到select的全部的值就用一个for循环来实现。代码如下:
var vi = document.all['list'].length;for(var i=0;i<vi;i++){ document.form2.list(i).value; //form2是<form>的名称}
JS实现代码:
‍‍<select id="pid" onchange="gradeChange()"> <option grade="1" value="a">选项一</a> <option grade="2" value="b">选项二</a></select><script type="text/JavaScript"> function gradeChange(){ var objS = document.getElementById("pid"); var grade = objS.options[objS.selectedIndex].grade; alert(grade); }</script>
jQuery实现代码:
<select name="myselect" id="myselect"> <option value="opt1">选项1</option> <option value="opt2">选项2</option> <option value="opt3">选项3</option></select>$("#myselect").change(function(){ var opt=$("#myselect").val(); .});
Javascript获取select下拉框选中的值
现在有一id=test的下拉框,怎么拿到选中的那个值呢?
分别使用javascript原生的方法和jquery方法
<select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option></select>
代码:
一、javascript原生的方法
1. 拿到select对象:
var myselect=document.getElementById("test");
2. 拿到选中项的索引:
var index=myselect.selectedIndex;// selectedIndex代表的是你所选中项的index
3. 拿到选中项options的value:
myselect.options[index].value;
4:拿到选中项options的text:
myselect.options[index].text;
二、jquery方法(前提是已经加载了jquery库)
1.获取选中的项
var options=$("#test option:selected");
2.拿到选中项的值
alert(options.val());
3.拿到选中项的文本alert(options.text());

阅读全文

与js实现滚动列表框相关的资料

热点内容
nodejs关闭自动重启 浏览:318
ciscowrv210密码 浏览:20
如何用命令打开txt文件 浏览:8
刷新才能改文件名 浏览:582
mp4文件没有声音 浏览:774
织梦的文件夹有哪些 浏览:608
真三国无双5升级快的 浏览:235
googlemap分片下载工具 浏览:536
python打印文件内容 浏览:450
格式化sd卡无文件夹 浏览:902
电脑怎么多开网络游戏 浏览:218
有哪些高清看剧网站 浏览:589
js长度变化触发 浏览:933
4个文件夹名称连成霸气 浏览:179
苹果7生产日期10月份 浏览:814
java泛型和c膜拜 浏览:300
数据库date类型比较大小吗 浏览:602
复制的文件到iphone找不到 浏览:358
换手机如何把数据转移到电脑 浏览:860
旅之星u盘拷贝文件显示写保护 浏览:413

友情链接