详解select标签设置默认选中的方法

本文主要为大家分享一篇select标签设置默认选中的选项方法,具有很好的参考价值,希望能帮助到大家。

方法有两种。

第一种 通过的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果。

123

登录后复制

第二种 为通过前端js来控制选中的项:

function change(){  document.getElementById("sel")[2].selected=true;}123

登录后复制

获取标签选中项文本的js代码为:

var val = document.all.Item.options[document.all.Item.selectedIndex].textvar i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value;

登录后复制

一些其它操作标签的技巧如下:

1)动态创建select

function createSelect(){var mySelect = document.createElement( "select" );mySelect.id = "mySelect" ;document.body.appendChild(mySelect);}

登录后复制

2)添加选项option

function addOption(){//根据id查找对象,var obj=document.getElementById( 'mySelect' );//添加一个选项obj.add( new Option( "文本" , "值" ));}

登录后复制

3)删除所有选项option

function removeAll(){var obj=document.getElementById( 'mySelect' );obj.options.length=0;}

登录后复制

4)删除一个选项option

function removeOne(){var obj=document.getElementById( 'mySelect' );//index,要删除选项的序号,这里取当前选中选项的序号var index=obj.selectedIndex;obj.options.remove(index);}

登录后复制

5)获得选项option的值

var obj=document.getElementById( 'mySelect' );var index=obj.selectedIndex; //序号,取当前选中选项的序号var val = obj.options[index].value;

登录后复制

6)获得选项option的文本

var obj=document.getElementById( 'mySelect' );var index=obj.selectedIndex; //序号,取当前选中选项的序号var val = obj.options[index].text;

登录后复制

7)修改选项option

var obj=document.getElementById( 'mySelect' );var index=obj.selectedIndex; //序号,取当前选中选项的序号var val = obj.options[index]= new Option( "新文本" , "新值" );

登录后复制

8)删除select

function removeSelect(){var mySelect = document.getElementById( "mySelect" );mySelect.parentNode.removeChild(mySelect);}

登录后复制

相关推荐:

在HTML里select标签有哪些用法

JQuery 获取多个select标签option的text内容(实例)

js获取select标签value值的方法详解

以上就是详解select标签设置默认选中的方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2785296.html

(0)
上一篇 2025年3月8日 17:23:19
下一篇 2025年3月8日 17:23:28

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue.js实现select下拉列表的实例

    目标:用ul-li标签结合vue.js知识做一个模仿select标签的下拉选项列表。本文主要为大家分享一篇vue.js做select下拉列表的实例(ul-li标签仿select标签),希望能帮助到大家。 效果图: 1、未做任何操作前,下拉列…

    2025年3月8日 编程技术
    200
  • iview的select下拉框选项错位解决办法

    在使用iview的过程中,我遇到这样一个问题,在model中使用select下拉框组件。但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位。) 图1: 图2: 在分析组件代码后,发现以…

    2025年3月8日
    200
  • vue实现select选中值不更改方法

    本文主要为大家分享一篇解决vue 更改计算属性后select选中值不更改的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 先上代码: //… {{item.value}} {{selected}…

    2025年3月8日
    200
  • layui中select动态添加option

    本文主要为大家分享一篇layui select动态添加option的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 html 产品类别 轻松融 容易融 快乐融 增加产品类别 登录后复制 js //重…

    编程技术 2025年3月8日
    200
  • layui中select的option叠加问题

    在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑,特贴上我的源码: nbsp;html>…

    编程技术 2025年3月8日
    200
  • js如何获取select标签选中的值

    本文主要和大家分享js如何获取select标签选中的值,有两种方式和大家分享,希望能帮助到大家。 var obj = document.getElementByIdx_x(”testSelect”); //定位idvar index = o…

    编程技术 2025年3月8日
    200
  • setTimeout如何把时间设置为0

    本文主要给大家介绍了关于settimeout时间设置为0的相关内容,settimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的…

    编程技术 2025年3月8日
    200
  • 怎么使用select获取选中的值

    这次给大家带来怎么使用select获取选中的值,使用select获取选中的值的注意事项有哪些,下面就是实战案例,一起来看一下。 $(‘.city-area’).on(‘change’,function(){ //select切换事件    …

    编程技术 2025年3月8日
    200
  • jQuery动态显示select下拉列表数据

    这次给大家带来jquery动态显示select下拉列表数据,jquery动态显示select下拉列表数据的注意事项有哪些,下面就是实战案例,一起来看一下。 先来看看运行效果: 具体代码如下: nbsp;HTML>    jQuery动…

    2025年3月8日
    200
  • jquery获取select标签的值及文本

    这次给大家带来jquery获取select标签的值及文本,jquery获取select标签值及文本的注意事项有哪些,下面就是实战案例,一起来看一下。 1.要想使用jquery首先html或者jsp中得引入jquery文件。 2.话不多说,上…

    2025年3月8日
    200

发表回复

登录后才能评论