JS案例之SELECT标签

最新推荐文章于 2023-07-10 10:23:57 发布
VIP文章 最新推荐文章于 2023-07-10 10:23:57 发布
阅读量435 收藏
点赞数 1
分类专栏： JS案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sky6even/article/details/102749512
版权

◆ 载入页面SELECT标签默认为空

<body onload="load()">
    <select id="abc" >
        <option >1</option>
        <option >2</option>
        <option >3</option>
        <option >4</option> 
    </select>
</body>

<script>
	function load(){
	  var x = document.getElementById("abc"); 
	  x.selectedIndex = -1;
	} 
</script>

使用css方式：

<select id="abc" >
	<option selected="selected" disabled="disabled"  style='display: none' value=''></option>
    <option >1</option>      
    <option >2</option>          
    <option >3</option>          
    <option >4</option>       
</select>

◆ 获取select标签选中的值：

var obj = document.getElementByIdx_x(”testSelect”); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值
宅羽
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯JS实现表单验证实例
11-28
表单我实现了，input属性是text（文本框）、radio（单选按钮）、checkbox（多选按钮）的知识点， fieldset标签（组合表单中的相关元素）、select标签（选择列表）和textarea标签（多行文本框）。 <form action="MAILTO:[email protected]" method="post" enctype="text/plain" onsubmit="return checkForm()"> <h2>学生选课基本信息</h2> 姓名：<input type="text" id="name" placeholder="yourna
js操作select标签
peng_hao'Blog
07-05 123
Select的动态添加、删除、移动、获取选中项的值、排序等等操作。 function AddOption(obj,text,value,title){var selTarget = document.getElementByIdx(obj);var seltitle = selTarget.title; var op = document.createElement_x_x("option");...
javascript select option对象总结
习惯在马桶上思考
12-20 671
一基础理解: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在标签中创建一个或多个文本 //options是个数组,里面可以存放多个文本这样的标签 1:options[ ]数组的属性: length属性--------...
JavaScript：Select标签
weixin_34356138的博客
07-15 80
2019独角兽企业重金招聘Python工程师标准>>> ...
html:select标签示例
wmg494005678的专栏
10-09 242
需要注意的是：与select标记不同的是默认值不是在option中用selected来进行标志，而是在通过value来进行标志。multiple用来设置是否允许多选，size来设置显示个数。贴一下代码吧。 [code="html"] ...
用javascript来实现select标签的美化
龙的天空
08-16 1754
论坛经常有人会问到用CSS如何美化Select标签，其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下，基本实现的初级功能。拿出来和大家一起分享一下。先可以看一下预览效果：http://www.iwcn.net/demo/select。【功能需求】1、调用要方便，做好之后应该像这样： 程序代码function loadSelect(selectobj){//传入一
前端web select 多层级选择。利用 ztree.js 实现下拉框的多选和单选demo.有兴趣的可以了解一下。
03-02
1.ztree.js 的实用案例 2.解决了 下拉框下多层级选择的问题 3.jquery + bootstrap+ztree.js
shiro-springboot-thymeleaf模板 登录认证权限授予验证案例.zip
09-06
做的登录认证权限授予验证案例，讲解很全面，对登录认证和权限授予都做了详细说明，其中 shiro 权限验证的三种方式：add()(编程方式) delete()(注解方式) update()和select()(JSP标签方式)都做了案例来讲解
[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part1.rar
04-01
　7.2.2　通过script标签绕过跨站点限制　 　7.2.3　后退按钮和书签功能　 　7.2.4　完成请求的赛跑　 　7.2.5　增加资源占用　 　7.2.6　问题解决了吗　 　7.3　实例：Ajax增强的相册　 　7.4　小结　 　第8章　...
[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part3.rar
04-01
　7.2.2　通过script标签绕过跨站点限制　 　7.2.3　后退按钮和书签功能　 　7.2.4　完成请求的赛跑　 　7.2.5　增加资源占用　 　7.2.6　问题解决了吗　 　7.3　实例：Ajax增强的相册　 　7.4　小结　 　第8章　...
JQuery案例之SELECT标签
宅羽的博客
10-25 175
◆ 获得选中select值 第一种方式 $('#testSelect option:selected').text();//选中的文本 $('#testSelect option:selected') .val();//选中的值 $("#testSelect ").get(0).selectedIndex;//索引 第二种方式 $("#tesetSelect").find("option:s...
《js基础-select选择标签》select下拉选择选中值
热门推荐
刘贵庆的博客
08-10 1万+
前述：终于抽出时间，整理了一些编程中所需基础知识。 select下拉选择：选择后输出选中的信息。 效果： code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础-select选择标签</title> </head> <body> xxxx种类： <select id="st
select使用实例
09-23 431
server.cpp #include #include #include #include #include #include #include #include #include #include #include #include #include #include #define ip "127.0.0.1" #define port 8888 int
Select 实例
gate0088的专栏
05-14 329
Linux Select 实例
JS对HTML标签select的操作
零全零美
04-27 425
//设定那个选项被选中 select.options[i].selected=true select.value="value" select.selectedIndex = index; //创建新的Option对象 new Option(text,value) new option(text,value,defaultSelected,selected text:字符串，指定option对象的...
js中关于<Select>标签的一些用法
E-小伍的博客
04-07 3780
先贴一个基础的标签出来： 选项一 选项二 上面的不作解释，直接看下面的js，//关于Select的各种设置 //关于Select的各种设置 //关于Select的各种设置 // $("#select_id").change(function(){}); // 1.为Select添加事件，当选择其中一项时触发 var checkValue = $("#select_id").val(
通过js获取＜select＞标签，初始化为“ “
m0_69064503的博客
07-10 292
通过js获取select标签，初始化为" "
JS中操作＜select＞标签选的值
cnds123的专栏
12-17 1万+
JS中操作标签选的值
JS、jQuery中select的用法详解_javascript技巧
01-24 1424
JS、jQuery中select的用法详解_javascript技巧 简介这篇文章主要介绍了JS、jQuery中select的用法详解的相关资料,需要的朋友可以参考下 1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = tr
js select标签
最新发布
08-02
回答: 在JavaScript中，可以使用以下方法来获取和设置select标签的选中值。如果使用CSS方式创建select标签，可以通过以下代码获取选中的值： ```javascript var obj = document.getElementById("abc"); // 定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 ``` 如果想在页面加载时将select标签的默认值设置为空，可以使用以下代码： ```html <body onload="load()"> <select id="abc"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </body> <script> function load() { var x = document.getElementById("abc"); x.selectedIndex = -1; } </script> ``` 另外，如果想直接设置select标签的选中值，可以使用以下代码： ```html <select id="select_id"> <option value="a">选项一</option> <option value="b">选项二</option> </select> ``` 希望以上信息能够帮助到您。[1][2][3]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值