使用JS给value属性赋值的实例

最新推荐文章于 2023-05-27 23:35:29 发布

Bill好想

最新推荐文章于 2023-05-27 23:35:29 发布

阅读量2.8w

点赞数 2

分类专栏： Web技术文章标签： jQuery JavaScript value 赋值 DOM

本文链接：https://blog.csdn.net/u012712087/article/details/47134865

版权

Web技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head>
	<title>使用JS给value属性赋值的实例 by Bill好想</title>

<script src="jquery.min.js"></script>

<script>
		//方法1：forms是全局表单对象
		function show1(val){
			document.forms.myform.result.value = val ; 
			//等价于document.myform.result.value = val ;  
		}
		//方法2：这里val代表HTML DOM Select对象
		function show2(val){
			document.myform.result.value = val.value ;
		}
		//方法3：通过document.getElementById()访问HTML DOM Select对象
		function show3(){
			document.myform.result.value = document.getElementById("org1").value ;
		}
		//方法4：通过属性名来找
		function show4(){
			document.myform.result.value = document.myform.dept4.value;
		}
</script>

<script>
	$(document).ready(function(){
		//方法5：使用jQuery事件中的bind()方法，将click事件绑定到id为org2的元素上
		$("#org2").bind("click",function(){
			$("#result").val($("#org2").val());
			//以下写法会产生：“不能给函数返回值赋值”的错误！
			//! $("#result").val() = $("#org2").val();
		});
		//方法6：直接调用jQuery事件中的click方法
		$("#org3").click(function(){
			$("#result").val($("#org3").val());
		});
		//方法7：在方法5的基础上，将jQuery对象转换成DOM对象，实质就是方法1和2
		$("#org4").click(function(){
			$("#result").get(0).value = $("#org4").get(0).value;
		});
		//方法8：在方法5的基础上，将jQuery对象转换成DOM对象，实质就是方法1和2
		$("#org5").click(function(){
			//$("#result").get(0).value = $("#org5").get(0).value;
			//或者采用这种转换方法
			$("#result")[0].value = $("#org5")[0].value;
		});
	});
</script>

</head>
<body>
<form action="test.htm" method="post" name="myform">
	部门：	<select name="dept1" οnchange="javascript:show1(this.value)">	<!-- 与οnchange="show1(this.value)" 等价，但是如果有return关键字，“javascript:”会报错-->
			<option value="技术部">技术部</option>
			<option value="销售部">销售部</option>
			<option value="财务部">财务部</option>
		</select>
	部门：	<select name="dept2" οnchange="show2(this)">
			<option value="技术部">技术部</option>
			<option value="销售部">销售部</option>
			<option value="财务部">财务部</option>
			</select>
	部门：	<select name="dept3" οnchange="show3()" id="org1">
			<option value="技术部">技术部</option>
			<option value="销售部">销售部</option>
			<option value="财务部">财务部</option>
		</select>
	部门：	<select name="dept4" οnchange="show4()">
			<option value="技术部">技术部</option>
			<option value="销售部">销售部</option>
			<option value="财务部">财务部</option>
		</select>
	部门：	<select name="dept5" id="org2">
			<option value="技术部">技术部</option>
			<option value="销售部">销售部</option>
			<option value="财务部">财务部</option>
		</select>
	部门：	<select name="dept6" id="org3">
			<option value="技术部">技术部</option>
			<option value="销售部">销售部</option>
			<option value="财务部">财务部</option>
		</select>
	部门：	<select name="dept7" id="org4">
			<option value="技术部">技术部</option>
			<option value="销售部">销售部</option>
			<option value="财务部">财务部</option>
		</select>
	部门：	<select name="dept8" id="org5">
			<option value="技术部">技术部</option>
			<option value="销售部">销售部</option>
			<option value="财务部">财务部</option>
		</select>
	结果：	<input type="text" name="result" value="" id="result">
</form>
</body>
</html>

示例代码中部分使用了jQuery，jQuery是功能强大却又简洁明快的轻量级JavaScript库。

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

需要使用到：jquery.min.js文件，可以从网上下载。

Bill好想

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JS给value属性赋值的实例

使用JS给value属性赋值的实例 by Bill好想 function show1(val){ document.myform.result.value = val ; } //方法1：这里val代表HTML DOM Select对象 function show2(val){ document.myform.result.value = val.value ;
复制链接

扫一扫