key up 和change 状态同时
Published
2023-09-10
浏览次数 : 23
<!DOCTYPE html>
<html>
<head>
<title>Custom Filter Form</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="filterForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<br>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="all">All</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br>
<label for="city">City:</label>
<input type="text" id="city" name="city">
</form>
<script>
// Function to handle form changes
function handleFormChanges() {
const name = $('#name').val();
const age = $('#age').val();
const gender = $('#gender').val();
const city = $('#city').val();
// Replace this with your custom filter function
console.log('Filter Criteria:');
console.log(`Name: ${name}`);
console.log(`Age: ${age}`);
console.log(`Gender: ${gender}`);
console.log(`City: ${city}`);
// Call your filtering function here with the filter criteria
}
// Add event listeners to the form elements for both 'keyup' and 'change' events
$('#filterForm input, #filterForm select').on('keyup change', handleFormChanges);
</script>
</body>
</html>
- 标签1
- 标签1
- 标签1