html下拉框(select元素标签)的基本操作

1、获取单个select框的选中值。

js方法获取:

获取value值:

var value = document.getElementById("select_ID").value;

获取text值:

var selectObj= document.getElementById("select_ID");
var text=selectObj[selectObj.selectedIndex].innerHTML;

jquery方法获取:

获取value值:

$("#select_ID").val();

获取text值:

$("#select_ID").find("option:selected").text();

2、获取所有select框的选中值

var selectList = document.getElementsByTagName("select_Name");
for (var i = 0; i < selectList.length; i++) 
{
  alert(selectList[i].value);//获取value值
  alert($(selectList[i]).find("option:selected").text());//获取text值
}

3、为select框添加下拉项
js方法:

 var selectObj= document.getElementById("select_ID");
 var opp = new Option(text, value);
 selectObj.add(opp);

jquery方法:

 $("#select_ID").append("");  //添加一项option
 $("#select_ID").prepend(""); //在前面插入一项option

4、移除select框下拉项

批量删除:

 var selectObj = document.getElementById("select_ID");
 var optionItems = selectObj.options;
 for (var i = optionItems.length-1; i >=0 ; i--) 
 {
    $(optionItems[i]).remove();
 }

单个删除:    

 $("#select_ID option:last").remove(); //删除索引值最大的Option
 $("#select_ID option[index='0']").remove();//删除索引值为0Option
 $("#select_ID option[value='3']").remove(); //删除值为3Option
 $("#select_ID option[text='4']").remove(); //删除text值为4Option

5、设置select的值

设置select 选中的value:

 $("#select_ID").attr("value","Normal“);
 $("#select_ID").val("Normal");
 $("#select_ID").get(0).value = value;

设置select 选中的text:

 var count=$("#select_ID option").length;//select下拉框的option条数
 for(var i=0;iif($("#select_ID").get(0).options[i].text == “text”)          
  {              
   $("#select_ID").get(0).options[i].selected = true;                        
   break;          
  }      
 }

设置select 选中的索引:

$("#select_ID").get(0).selectedIndex=index;//index为索引值

##jQuery取得设置清空select选择的文本与值 获取select : 获取select 选中的 text : (“#ddlregtype”).find(“option:selected”).text();

获取select选中的 value:
(“#ddlregtype “).val(); 获取select选中的索引: (“#ddlregtype “).get(0).selectedindex;

设置select:
设置select 选中的索引:
(“#ddlregtype “).get(0).selectedindex=index;//index为索引值 设置select 选中的value: (“#ddlregtype “).attr(“value”,”normal“); (“#ddlregtype “).val(“normal”); (“#ddlregtype “).get(0).value = value;

设置select 选中的text:

var count=
(“#ddlregtype option”).length; for(var i=0;i
//绑定ClassLevel1单击事件
$("#ClassLevel1").change(function () 
{
    var id = $("#ClassLevel1").val();
    var level2 = $("#ClassLevel2");
    level2.empty();
    $("#ClassLevel3").hide();
    $.ajax({
    url: "./askCommon.ashx?action=getclasslevel&pid=" + id,
    data: { "type": "ajax" },
    datatype: "json",
    type: "get",
    success: function (data) {
    var json = eval_r(data);
    for (var ind in json) {
    level2.append($(" + json[ind].typename + ""));
    }
    }
    });
})

你可能感兴趣的:(Html+Javascript)