JavaScript——表单对象和下拉框

最新推荐文章于 2023-01-31 17:46:16 发布

Regina_Wan

最新推荐文章于 2023-01-31 17:46:16 发布

阅读量959

点赞数

分类专栏： javascript 文章标签： JavaScript 表单对象和下拉框

本文链接：https://blog.csdn.net/Yun_Ge/article/details/89061878

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表单的三种查找方法：

<body>
	<form action="1.php"method="post"id="fm"name='frm'>
		<input type="text"name="username"value="张三" /><br />
		<input type="password"name="password" />
		<input type="submit"value="提交" />
	</form>
</body>
<script>
	//通过id值获取form对象
	var oForm = document.getElementById('fm')
    //通过name值获取form对象
    var oForm =document.frm;
    //通过document自带的forms属性
	var oForm =document.forms[0];
	//得到之后可以获取表单属性的信息
	console.log(oForm.action,oForm.method)//获取提交方式和地点
	console.log(oForm.username.value)//获取具体值
</script>

提交按钮的切换功能：

<body>
	<form action="1.php"method="post"id="fm"name='frm'>
		<input type="text"name="username"value="张三" /><br />
		<input type="password"name="password" />
		<input type="submit"value="提交1号" />
		<a href=""onclick="return sub();">"提交2号"</a>
	</form>
</body>
<script>
//实现了'提交2号'按钮代替'提交1号'按钮的功能
	var oForm =document.forms[0];
	function sub()
	{
		oForm.submit();
		return false;
	}
</script>

下拉框属性的获取：

<body>
	<select name=""id="sel">
		<option value="100">请选择</option>
		<option value="200">北京</option>
		<option value="300">上海</option>
		<option value="400">广州</option>
	</select>
</body>
<script>
	var oSel = document.getElementById('sel')
	oSel.onchange=function()
	{
		console.log(oSel.selectedIndex);//获取所选项的序列号（0,1,2...)
		console.log(oSel.options);//获取下拉框中所有可选项
		console.log(oSel.options[oSel.selectedIndex].value);//获取选择对象的具体值
	}
</script>