根据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”，谢谢！