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

方法有两种。

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

< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >

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

< script type = "text/javascript" >
function change(){
  document.getElementById("sel")[2].selected=true;
}
</ script >
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" >2</ option >
< option value = "3" >3</ option >
</ select >
< input type = "button" value = "修改" onclick = "change()" />

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

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

一些其它操作<select>标签的技巧如下：

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);
}

以上这篇select标签设置默认选中的选项方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS简单设置下拉选择框默认值的方法

    本文实例讲述了JS简单设置下拉选择框默认值的方法.分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = objSelect.options; if(options){ var len = options.length; for(var i=0;i<len;i++){ if(options[i].value == targ

  • Js操作Select大全(取值、设置选中等等)

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[tex

  • angularjs的select使用及默认选中设置

    我最近在研究angularjs学习的道路上,那么今天也算个学习笔记吧! 1 ng-model="standardCourse.showHours"代替name 2 ng-selected = "1"代替selected="selected",但问题是select下会多出一个无用的option 3 在数据准备时设置,$scope.standardCourse.showHours= '1'; 解决多出的一个无用的option <label fo

  • select获取下拉框的值 下拉框默认选中方法

    本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如: <select class="form-control" id="numbers"> <option value="1">数字1</option> <option value="2" selected>数字2</option> </select> $("

  • jquery操作select详解(取值,设置选中)

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr(&qu

  • jquery select 设置默认选中的示例代码

    代码如下: 其中<%=selectedvalue %>为从后台获取的值 $(document).ready(function(){   $("#seltype").attr("value",parseInt('<%=selectedvalue %>')); })

  • select标签设置默认选中的选项方法

    方法有两种. 第一种 通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. < select id = "sel" > < option value = "1" >1</ option > < option value = "2" selected = "selected" >2</ option > <

  • element-ui中的select下拉列表设置默认值方法

    element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来 那如何修改呢? 上element-ui中的代码片段 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key=&qu

  • vue 实现单选框设置默认选中值

    vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 <li v-for="(value,i) in addList" :key="value.id"> <input class="radio" type="radio" name="radios" :value="i" v-mod

  • AngularJS select设置默认值的实现方法

    AngularJS select设置默认值的实现方法

    AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-app="noteApp" ng-controller="noteCtrl"> <head> <meta http-equiv="keywords" content="keyword1,keyword2,keyword

  • Mysql select语句设置默认值的方法

    Mysql select语句设置默认值的方法

    1.在没有设置默认值的情况下: 复制代码 代码如下: SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果: 设置显示默认值: 复制代码 代码如下: SELECT userinfo.id, user_name, role, adm_regionid, IFNUL

  • 使用jQuery给input标签设置默认值

    由于项目需求,简单地写了一个input默认值设置,实现给.form中所有的input设置默认值的方法. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>input默认值设置</title> <script type="text/javascript" src="http://apps.bdimg.com/li

  • 图解修改IIS web.config配置文件增设置默认文档的方法

    图解修改IIS web.config配置文件增设置默认文档的方法

    我们在发布的网站中找到web.config文件,打开这个这件,在<configuration></configuration>标签内添加几段代码,就可以指定默认启动的页面了.  <system.webServer>  复制代码 代码如下: <defaultDocument>      <files>        <add value="DreyeOnlineTestPage.html" />      </

  • AngularJS select加载数据选中默认值的方法

    问题描述: 在我们开发项目过程中,避免不了会用到select下拉框,那么在angular中如何使用select呢? 解决方案: 可以用ng-options来动态加载option,然后在用ng-model来匹配.代码如下: //html <select ng-model="role_id1" ng-options="o.name for o in list5"></select> //js $scope.list5 = [{"id&q

随机推荐