我试图使用jQuery做一个简单的事情:清除一个输入字段的一组输入字段在div每当表单加载,或者如果用户更改一个选项列表;但我有一个时间让选择器工作的魔鬼。
首先,这里是我的onclick和onload触发器:
<form name="EditGenotype" action="process_GenotypeMaint.PHP" method="POST" onsubmit="return false" onload=clear_fetch() >
和选择列表:
<SELECT multiple size=6 NAME="marker" onchange=show_marker() onclick=clear_fetch() >
接下来,这里是我的HTML输入元素在div我想清除:
<div class=fetch_results> <fieldset> <LEGEND><b>Edit Genotype,call 1</b></LEGEND> <boldlabel>Allele_1</boldlabel><input id=allele_1_1 name=allele_1_1 size=5 > <boldlabel>Allele_2</boldlabel><input id=allele_1_2 name=allele_1_2 size=5 > <boldlabel>Run date</boldlabel><input id=run_date1 name=run_date1 size=10 disabled=true> </fieldset> <fieldset> <LEGEND><b>Edit Genotype,call 2</b></LEGEND> <boldlabel>Allele_1</boldlabel><input id=allele_2_1 name=allele_2_1 size=5 > <boldlabel>Allele_2</boldlabel><input id=allele_2_2 name=allele_2_2 size=5 > <boldlabel>Run date</boldlabel><input id=run_date2 name=run_date2 size=10 disabled=true> </fieldset> <fieldset> <LEGEND><b>Edit Genotype,call 3</b></LEGEND> <boldlabel>Allele_1</boldlabel><input id=allele_3_1 name=allele_3_1 size=5 > <boldlabel>Allele_2</boldlabel><input id=allele_3_2 name=allele_3_2 size=5 > <boldlabel>Run date</boldlabel><input id=run_date3 name=run_date3 size=10 disabled=true> </fieldset> </div>
最后,这里是我的脚本:
function clear_fetch() { $('#fetch_results:input',$(this)).each(function(index) { this.value = ""; }) }
然而,没有什么发生…所以,我不能有选择器正确。有人看到我做错了吗?
解决方法
小提琴:
http://jsfiddle.net/simple/BdQvp/
你可以这样做:
我在小提琴中添加了两个按钮来说明如何通过按钮在这些输入字段中插入或清除值。你只需捕获onClick事件并调用该函数。
//Fires when the Document Loads,clears all input fields $(document).ready(function() { $('.fetch_results').find('input:text').val(''); }); //Custom Functions that you can call function resetAllValues() { $('.fetch_results').find('input:text').val(''); } function addSomeValues() { $('.fetch_results').find('input:text').val('Lala.'); }
更新:
查看this great answer below by Beena以及更通用的方法。