由多个输入字段触发的绑定事件

-1

什么是由多个输入字段触发的绑定事件的最佳实践，这些输入字段在jQuery中相互依赖？由多个输入字段触发的绑定事件

例如：让我们带一个搜索引擎，它根据下面的字段中输入和选择的内容搜索学生。

1. text boxes 
2. select lists 
3. select boxes 
4. option buttons

没有一个按钮，将引发这些事件，究竟是要达到以下的最佳方法：为用户在输入字段中的一个输入或选择值，一旦

显示搜索结果并在用户输入或选择其他字段选项中的值时优化搜索。
仅当每个字段具有有效值后才显示搜索结果。

任何输入都会被满足。

来源

2012-08-03 user793468

一些样品标记会对人好点。 – mVChr 2012-08-03 23:53:28

@mVChr目前我将相关字段值存储为其他事件中的变量，并在每个事件中分别按$（'＃field'）执行搜索操作。这看起来愚蠢，多余且效率低下。我希望有更好的方法来完成这些任务。 – user793468 2012-08-04 00:03:05

我把这个放在一起这个jsFiddle http://jsfiddle.net/VJwpv/1/。

如果您正在寻找在用JavaScript做验证，那么我建议你看看这个jQuery Validation plugin

HTML

<div id="searchForm"> 
    <input id="textBox" class="searchField" type="text" /> 
    <select id="dropDown" class="searchField"> 
     <option value="Option1">Option1</option> 
     <option value="Option2">Option2</option> 
    </select> 
    <input id="checkbox1Value" type="checkbox" name="checkbox" value="Checkbox1" />Checkbox1 
    <input id="checkbox2Value" type="checkbox" name="checkbox" value="Checkbox2" />Checkbox2 
    <input type="radio" name="radio" value="Radio1" /> Radio1 
    <input type="radio" name="radio" value="Radio2" /> Radio2 
</div> 

<div id="results"></div>

的JavaScript

function validateForm() { 
    // if valid 
    return true; 
    // else return false 
} 

function performSearch() { 
    var textBoxValue = $("#textBox").val(); 
    var dropDownValue = $("#dropDown").val(); 
    var checkbox1Value = $("#checkbox1Value").is(":checked"); 
    var checkbox2Value = $("#checkbox2Value").is(":checked"); 
    var radioValue = $("input:radio[name=radio]:checked").val(); 
    // What you'd actually do here is an AJAX call to get the search results 
    // and pass all the values defined above in the request 
    $("#results").html("Textbox: " + textBoxValue + ". Dropdown: " + dropDownValue + ". Checkbox1: " + checkbox1Value + ". Checkbox2: " + checkbox2Value + ". Radio: " + radioValue); 
} 

function onChange() { 
    if (validateForm()) { 
     performSearch(); 
    } 
} 

$(document).ready(function() { 
    $("#searchForm input, #searchForm select").change(function() { 
     onChange(); 
    }); 
});

来源

2012-08-04 01:06:41

只要给他们都一个共同的类名，并使用类选择绑定change事件：

HTML：

<input type="text" class="search-field" /> 
<input type="text" class="search-field" /> 
<select class="search-field" ><option>1</option><option>2</option></select> 
<input type="radio" class="search-field" />

JS：

$('.search-field').change(function() { 
    // validate all search field values 
    // display search results based on values 
    // if search results already shown, filter based on $(this).val() 
});

如果你有很多这些领域，而不是有一个处理程序绑定到每一个（如上面的代码完成），您将通过使用委托的事件处理程序获得更好的性能：

HTML：

<div id='parent'> 
    <input type="text" class="search-field" /> 
    <input type="text" class="search-field" /> 
    <select class="search-field" ><option>1</option><option>2</option></select> 
    <input type="radio" class="search-field" /> 
</div>

JS：

$('#parent').on('change', '.search-field', function() { 
    // validate all search field values 
    // display search results based on values 
    // if search results already shown, filter based on $(this).val() 
});

来源

2012-08-04 00:33:53 nbrooks

由多个输入字段触发的绑定事件

回答

相关问题