根据select选项，显示不同的表单，进而提交显示的数据

表单，进而提交显示的数据"/>

根据select选项，显示不同的表单，进而提交显示的数据

   最近公司在做项目的过程中，出现表单中，需要根据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”，谢谢！