HTML中的<select>标签如何设置默认选中的选项

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