文本框里的几个属性：
value:设置文本框里的初始文字。
disabled：默认为false 当为true时该文本框禁用。
readOnly：默认为false 当为true时该文本框不能输入文字只能阅读。
focus();该方法可以设置默认获取焦点。
以下为实验代码：
!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="实验" onsubmit="return submitf()"/>
</form>
<script>
var text=document.getElementsByName("i")[0];
text.value="请输入文字";
text.focus();
function submitf(){
var text=document.getElementsByName("i")[0];
text.readOnly=true;//此为只读
text.disabled=true;//设置禁用
console.log(text.readOnly);
return true;
}
//type =password 或者textarea标签也有value 设置默认值 readonly disabled focus属性'
</script>
</body>
</html>
//当按下按钮时设置禁用和只读 默认获取焦点
选项里的几个属性（包括checkbox radio选项类型）
disabled：设置是否禁用这个选项；
value：获取该标签的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 循环输出每个选择项的checked 并输出每个选项的value
var checkboxs=document.getElementsByName("hobby");
var hobby=checkboxs[0];
hobby.disabled=true;
console.log(hobby.value);
//禁用一选项并输出该选项的value
/*for (var i = 0; i < checkboxs.length; i++) {
var hobby=checkboxs;
hobby.disabled=true;//disabled属性拥有禁用
console.log(hobby.checked+","+hobby.value);
}*/
//for 循环输出每个选择项的checked 并输出每个选项的value
</script>
</body>
</html>
下拉列表里的几个属性
通过给select一个 name 或者class （注意下标的问题因为可能有多个select）（id也行） 来用document.getElementsByName 或者ClassName 来获取下拉列表里的选项
从而可以用length属性来获取选项的个数
用selectedIndex属性来获取选中选项的位置
用value属性获取相应option标签里包裹的内容（value可以设置，但默认为标签内包裹的内容）
用text属性获取相应option标签里包裹的内容
下面options是包含下拉列表里所有标签的数组
!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 >一年级</option>
<option >二年级</option>
<option >三年级</option>
<option >四年级</option>
</select>
</form>
<script>
function test(){
var selects=document.getElementById("g");
console.log(selects.length);
console.log(selects.selectedIndex);//里面的东西是选中的位置
var options=selects.options;//option保存这个下拉列表里的东西
console.log(options[selects.selectedIndex].value);
for(var i=0;i<options.length;i++)//默认value是option里的东西
{
var option=options;
console.log(option.value);
}
for(var i=0;i<options.length;i++)//option数组里存着下拉列表里的选项标签
{
var option=options;
console.log(option);
}
options[0].disabled=true;//下拉列表里一样可以设置禁用
return false;
}
</script>
</body>
</html>
select里的几个方法：
添加选项可以通过new Option()与add()方法来实现
删除选项可以通过remove()方法来实现
示例代码
<!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");//前一个值是option里的文本 后一个值是位置
select.add(option);//在相应位置补充选项
select.remove(3);//删除当前3所在位置的选线
}
</script>
</body>
</html>
本文版权归黑马程序员JavaEE学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：黑马程序员前端与移动开发培训学院
首发：http://web.itheima.com/?v2
AI智能应用开发
AI大模型开发
AI鸿蒙开发
AI嵌入式+
AI大数据开发
AI运维
AI测试
跨境电商运营
AI设计
AI视频创作运营
.jpg)