jquery 操作 select

1.page

<div>

    <select name="album" id="album">

        <option value="1">推荐</option>

        <option value="2">排行</option>

        <option value="3">分类</option>

        <option value="4">搜索</option>

    </select>

<div>

 

2.scripts

<script language="javascript" type="text/javascript" src="jquery-1.8.0.js"></script>

<script language="javascript" type="text/javascript" >

$(function(){

console.log("jquery do select");

 

$s = $("#album");

console.log($s);

//获取选项的value

console.log($s.val());

//获取选项的text

console.log($s.find("option:selected").text());

//清空

console.log("before clear size is "+$s.find("option").size());

$s.empty();

console.log("after clear size is "+$s.find("option").size());

//遍历追加

var ops = [{"v":1,"t":"推荐"},{"v":2,"t":"排行"},{"v":3,"t":"分类"},{"v":4,"t":"搜索"},{"v":5,"t":"我"}];

$(ops).each(function(i){

//添加下拉框的option

$("<option value="+this.v+">"+this.t+"</option>").appendTo($s);

});

//判断是否有选中项

console.log("选中项个数:"+$s.find("option[selected='selected']").size());

 

//遍历修改,把value+10

$s.find("option").each(function(i){

var $this = $(this);

var v = $this.val();

var t = $this.text();

 

//移除value=5的option

if(v==5){

$this.remove();

}

 

//对数字value增10，对text增+

if(!isNaN(v)){

$this.val(parseInt(v)+10);

$this.text(t+"+");

}

console.log($this.val());

 

});

//

 

});

</script>