最近公司在做项目的过程中,出现表单中,需要根据select的不同选项,进而显示不同的不同的input选项,同时,提交的时候,只提交当时显示的input数据。整理了下思路来解决这个问题。
首先,表单中的input选项,不管是display:none;还是hidden,点击表单中的button按钮时,都会提交上去。jQuery的serialize()方法也是不管是display:none还是hidden都可以收集到表单信息。但是,当input中加入disabled后,表单内部提交按钮和serialize()方法都不能收集到。其中一个思路,就是开始在每一个input中都加入disabled,然后select选项发生变化,即将显示的input选项去掉“disabled”,然后其siblings().attr("disabled",true);另外一个思路,就是保存上个option的值,每变更一次,对即将出现的input选项去掉disabled,对即将离开的input选项设置.attr("disabled",true);
思路一:
<form id="questionForm" >
<select name="" id="country">
<option value="China">China</option>
<option value="Britain">Britain</option>
<option value="America">America</option>
</select>
<div>
<div id="China" class="none">
北京 <input type="text" name="beijing" disabled/><br>
上海<input type="text" name="shanghai" disabled/>
</div>
<div id="Britain" class="none">
伦敦 <input type="text" name="London" disabled/><br>
约克郡 <input type="text" name="Yorkshire" disabled/>
</div>
<div id="America" class="none">
纽约 <input type="text" name="NewYork" disabled/><br>
华盛顿<input type="text" name="DC" disabled/>
</div>
</div>
<button id="test" type="submit">submit</button>
</form>
<button id="test1">测试</button>
$("#test1").click(function(){
console.log($("#questionForm").serialize());
});
$("#country").change(function(){
var testval=$("#country").val();
$("#"+testval).show().siblings().hide();
$("#"+testval).find("input").removeAttr("disabled");
$("#"+testval).siblings().find("input").attr("disabled",true)
});
思路二:
$("#test1").click(function(){
console.log($("#questionForm").serialize());
});
var typeTemp=[];typeTemp[0]=1;var i=0;
$("#country").change(function(){
var testval=$("#country").val();
if(i<2){
i++;
typeTemp.push(testval);
lastType=typeTemp.shift();
}else{
i=0;
typeTemp.push(testval);
lastType=typeTemp.shift();
}
$("#"+testval).show().siblings().hide();
$("#"+testval).find("input").removeAttr("disabled");
$("#"+lastType).find("input").attr("disabled",true)
});
以上,是我个人一些认识,如果哪位同学,有其他思路,可以交流。我的微信号Alfred-kai,请注明“csdn”,谢谢!