表单控件之select

时间：2023-02-19 22:58:56

一、表单控件之表单

1、依次获取表单里的所有控件：

for (i = 0; i < document.getElementById("formName").length; i++) {

　　var ob = document.getElementById(formName).elements[i];

　　if(ob.value=='')  //......

}

2、获取某个控件：

document.getElementById("formName").elements['elementNameOrInputId'];

3、获取某组控件：

如需要知道一组radio或checkbox中的勾选情况：

<form>

<input type="checkbox" name="coffee" value="奶油">奶油<br />

<input type="checkbox" name="coffee" value="糖块">糖块<br />

<input type="checkbox" name="coffee" value="白兰地">白兰地<br />

</form>

利用相同的name：

coffee=document.forms[0].coffee

for (i=0;i<coffee.length;++ i)

{  if (coffee[i].checked) { //......}}

4、表单元素有disabled和readonly之分：

  • disabled的项目不会提交；
  • readonly的项目会提交；

二、表单控件之select

1、可以通过设置下拉框的高度和字体来控制下拉框的大小和选项的字体大小，

select{height:30px;font-size:20px;}有效，设置option{height:30px;font-size:20px;}则无效

（即option的高度总是select字体的大小，而select的高度则可以与字体大小无关），但background和color则对二者都有效，

表单控件之select表单控件之select(截图来自chrome，在IE8中第二个select中字体是底部对齐的，即使设置：select{vertical-align:middle;}也无效)我觉得原因是对select和option分别设置背景颜色和字体颜色不会互相干扰，而对二者设置高度和字体大小无法达到统一。

2、不仅可以设置下拉框不可用，还可以设置某个选项不可用/选：

$('#option1').attr('disabled',true);        或       document.getElementById('option1').disabled=true;

3、为下拉框添加新选项：添加到末尾：

$("#select1").append("<option value='11'>11</option>");

4、获取选中项的选中索引、文本、值、option个数：

var index = obj.selectedIndex;        或  $(".selector option:selected").index();  // 获取选中索引

var text = obj.options[index].text;   或  $(".selector option:selected").text();   // 获取选中文本

var value = obj.options[index].value; 或  $('select').val();                       // 获取选中值

var count= obj.options.length;        或  $(".selector option").length;            // 获取option个数

5、设置选中项的选中索引、值、文本：

obj.selectedIndex=2;         或      obj.options[i].selected=true;     
或     $('select option:eq(2)').attr("selected",true);   //设置选中索引

推荐  $(".selector").val("v");     而非     $('select option[value='+v+']').attr("selected",true);  
 //设置选中值

$(".selector").find("option[text='文本']").attr("selected",true);    
//设置选中文本

注：对于可以多重选择的<select id='select1' multiple> selectedIndex和value都只代表第一个选中项，必须用for遍历

6、select下拉框只支持disabled属性，不支持readOnly属性(因为select本身就是只读的)，设置readOnly是无效的，radio也是如此。为了能够提交，可以使select不设置disabled, 但是让用户无法改变select 的选中项.

setSelectReadOnly(document.getElementById("select1"));

function setSelectReadOnly(obj){

  if(obj){

      obj.style.color = 'gray';

      var beginIndex=obj.selectedIndex;

      obj.onclick=function(){obj.selectedIndex=beginIndex;}

}

7、多个select级联：

如第二个下拉框选项根据第一个下拉框的选中项的不同而不同

$(".selector1").change(function(){

    $(".selector2").empty();// 先清空第二个

    var option = $("<option>").val(1).text("pxx");// 根据实际情况（循环）生成多个选项

    $(".selector2").append(option);}

相关文章