表單控制項之select

一、表單控制項之表單

1、依次獲取表單裡的所有控制項：

for (i = 0; i < document.getelementbyid("formname").length; i++)

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

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

二、表單控制項之select

1、可以通過設定下拉框的高度和字型來控制下拉框的大小和選項的字型大小，

select有效，設定option則無效

（即option的高度總是select字型的大小，而select的高度則可以與字型大小無關），但background和color則對二者都有效，

(截圖來自chrome，在ie8中第二個select中字型是底部對齊的，即使設定：select也無效)我覺得原因是對select和option分別設定背景顏色和字型顏色不會互相干擾，而對二者設定高度和字型大小無法達到統一。

2、不僅可以設定下拉框不可用，還可以設定某個選項不可用/選：

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

3、為下拉框新增新選項：新增到末尾：

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); 
//設定選中文字

注：對於可以多重選擇的selectedindex和value都只代表第乙個選中項，必須用for遍歷

6、select下拉框只支援disabled屬性，不支援readonly屬性(因為select本身就是唯讀的)，設定readonly是無效的，radio也是如此。為了能夠提交，可以使select不設定disabled, 但是讓使用者無法改變select 的選中項.

setselectreadonly(document.getelementbyid("select1")); 
function
setselectreadonly(obj)
}

7、多個select級聯：

如第二個下拉框選項根據第乙個下拉框的選中項的不同而不同

$(".selector1").change(function

(){ $(".selector2").empty();//

先清空第二個

var option = $("").val(1).text("pxx");//

根據實際情況（迴圈）生成多個選項

表單控制項之select

select 控制項操作

select 控制項操作

關於select 控制項

表單控制項之select

select 控制項操作

select 控制項操作

關於select 控制項

相關推薦