完成项
jq实现选择表单提交
非click事件动态绑定
判断是否隐藏
1.jq实现选择表单提交
主要是选择器的应用，以及select选择框的name属性 的应用
屏幕快照 2017-11-03 上午8.07.22.png
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jq表单数据</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#btn-query-param').click(function (e) {
e.preventDefault()
var name = {}
$('td').each(function (i) {
var inputText = $(this).find('input').val()
var $dom = $(this).find('select[name="selectName1"]')
var selectedText = $dom.find('option:selected').text()
name[selectedText] = inputText
})
name = JSON.stringify(name);
console.log(name)
})
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<select id="selectTest" name="selectName1">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">德国</option>
</select>
<input type="text">
</td>
</tr>
<tr><td>
<select id="selectTest" name="selectName1">
<option value="a1">11</option>
<option value="a2">22</option>
<option value="a3">33</option>
</select>
<input type="text">
</td></tr>
</table>
<button id="btn-query-param">查询</button>
</body>
</html>
- 一帮动态绑定使用的是动态绑定来完成事件的，但是因为select的change事件比较负责，对这种事件的绑定还是使用初始化的方法，先将事件给解除后再进行绑定，这样一个DOM上就不会添加过多的重复事件
$('select[name="select-query"]').unbind('changed.bs.select')
$('select[name="select-query"]').on('changed.bs.select',function () {})
- 判断节点是否隐藏
$input.is(':hidden')返回布尔值，true就是隐藏了display:none也算隐藏
网友评论