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

来源：互联网发布：淘宝有个比价的软件编辑：程序博客网时间：2024/05/23 21:07

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

0 0