文本框、選項(xiàng)下拉列表里的幾個(gè)屬性與select...

更新時(shí)間:2018-09-18 來(lái)源:黑馬程序員技術(shù)社區(qū) 瀏覽量:

文本框里的幾個(gè)屬性：

value:設(shè)置文本框里的初始文字。

disabled：默認(rèn)為false 當(dāng)為true時(shí)該文本框禁用。

readOnly：默認(rèn)為false 當(dāng)為true時(shí)該文本框不能輸入文字只能閱讀。

focus();該方法可以設(shè)置默認(rèn)獲取焦點(diǎn)。

以下為實(shí)驗(yàn)代碼：

!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<form>

<input type="" name="i" id="wd" value="" />

<input type="submit" name="" id="" value="實(shí)驗(yàn)" onsubmit="return submitf()"/>

</form>

<script>

  var text=document.getElementsByName("i")[0];

text.value="請(qǐng)輸入文字";

text.focus();

function submitf(){

  var text=document.getElementsByName("i")[0];

text.readOnly=true;//此為只讀

text.disabled=true;//設(shè)置禁用

  console.log(text.readOnly);

  return true;

}

  //type =password 或者textarea標(biāo)簽也有value 設(shè)置默認(rèn)值  readonly disabled focus屬性'

</script>

</body>

</html>

//當(dāng)按下按鈕時(shí)設(shè)置禁用和只讀默認(rèn)獲取焦點(diǎn)

選項(xiàng)里的幾個(gè)屬性（包括checkbox radio選項(xiàng)類型）

disabled：設(shè)置是否禁用這個(gè)選項(xiàng)；

value：獲取該標(biāo)簽的value值；

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<span id="tishi" style="color: red;">

</span>

<form onsubmit="return test()">

<input type="submit" value="提交"/>

<input type="radio" name="sex" value="0" />男<input type="radio" name="sex" value="1" />女

<input type="checkbox" name="hobby" value="0"/>足球

<input type="checkbox" name="hobby" value="1"/>籃球

<input type="checkbox" name="hobby" value="2"/>羽毛球

</form>

<script>

function test(){

  var radios=document.getElementsByName("sex");

  /*for (var i=0;i<radios.length;i++) {

var radio=radios;

radio.disabled=true;//禁用

console.log(radio.checked+","+radio.value);//checked為顯示是否被選中

}*/

              //for 循環(huán)輸出每個(gè)選擇項(xiàng)的checked 并輸出每個(gè)選項(xiàng)的value

  var checkboxs=document.getElementsByName("hobby");

  var hobby=checkboxs[0];

hobby.disabled=true;

  console.log(hobby.value);

  //禁用一選項(xiàng)并輸出該選項(xiàng)的value

  /*for (var i = 0; i <  checkboxs.length; i++) {

var hobby=checkboxs;

hobby.disabled=true;//disabled屬性擁有禁用

console.log(hobby.checked+","+hobby.value);

}*/

              //for 循環(huán)輸出每個(gè)選擇項(xiàng)的checked 并輸出每個(gè)選項(xiàng)的value

</script>

</body>

</html>

下拉列表里的幾個(gè)屬性

通過(guò)給select一個(gè) name 或者class （注意下標(biāo)的問(wèn)題因?yàn)榭赡苡卸鄠€(gè)select）（id也行）來(lái)用document.getElementsByName 或者ClassName 來(lái)獲取下拉列表里的選項(xiàng)

從而可以用length屬性來(lái)獲取選項(xiàng)的個(gè)數(shù)

用selectedIndex屬性來(lái)獲取選中選項(xiàng)的位置

用value屬性獲取相應(yīng)option標(biāo)簽里包裹的內(nèi)容（value可以設(shè)置，但默認(rèn)為標(biāo)簽內(nèi)包裹的內(nèi)容）

用text屬性獲取相應(yīng)option標(biāo)簽里包裹的內(nèi)容

下面options是包含下拉列表里所有標(biāo)簽的數(shù)組

!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<span id="tishi" style="color: red;">

</span>

<form onsubmit="return test()">

<input type="submit" value="提交"/>

<select name="g" class="g" id="g">

<option >一年級(jí)</option>

<option >二年級(jí)</option>

<option >三年級(jí)</option>

<option >四年級(jí)</option>

</select>

</form>

<script>

function test(){

  var selects=document.getElementById("g");

  console.log(selects.length);

  console.log(selects.selectedIndex);//里面的東西是選中的位置

  var options=selects.options;//option保存這個(gè)下拉列表里的東西

  console.log(options[selects.selectedIndex].value);

  for(var i=0;i<options.length;i++)//默認(rèn)value是option里的東西

{

  var option=options;

  console.log(option.value);

}

  for(var i=0;i<options.length;i++)//option數(shù)組里存著下拉列表里的選項(xiàng)標(biāo)簽

{

  var option=options;

  console.log(option);

}

options[0].disabled=true;//下拉列表里一樣可以設(shè)置禁用

  return false;

}

</script>

</body>

</html>

select里的幾個(gè)方法：

添加選項(xiàng)可以通過(guò)new Option()與add()方法來(lái)實(shí)現(xiàn)

刪除選項(xiàng)可以通過(guò)remove()方法來(lái)實(shí)現(xiàn)

示例代碼

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<select id="set">

<option value="1">一</option>

<option value="2">二</option>

<option value="3">三</option>

<option value="4">四</option>

</select>

<input type="button" onclick="test()" value="按鈕" />

<script>

function test(){

   var select=document.getElementById("set");

   var option= new Option("五","5");//前一個(gè)值是option里的文本后一個(gè)值是位置

   select.add(option);//在相應(yīng)位置補(bǔ)充選項(xiàng)

   select.remove(3);//刪除當(dāng)前3所在位置的選線

}

</script>

</body>

</html>

本文版權(quán)歸黑馬程序員JavaEE學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！

作者：黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院
首發(fā)：http://web.itheima.com/?v2

上一篇：vue中v-model詳解|黑馬程序員 下一篇：js --拖拽