1、通过select的属性来设置选中项,此方法可以在动态语言如php后台根据需要控制输出结果
<select name="" id="sel">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<!-- 默认选中第二项 -->
<option value="3">3</option>
</select>
2、通过前端js来控制选中项
<script>
function change(){
document.getElementById('sel')[2].selected=true;
}
</script>
<select name="" id="sel">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
<input type="button" value="修改" onclick="change()"/>
3、获取<select>标签选中项文本的js代码
var val = document.all.Item.option[document.all.Item.selectedIndex].text;
var i = document.getElementById('sel').options[document.getElementById('sel').selected].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);
}