2 zhaoweicoco zhaoweicoco 于 2016.03.04 11:55 提问

ajax 根据一个下拉框的值的不同 另一个下拉框对应显示的值也不同

图片说明
图片就是这样的,项目的类别有商户和银行两种,我要根据选择商户还是银行,让下边对应的选择已有商户 的下拉框中显示不同的数据,数据都需要通过后台去数据库里查的。
这个是不是要ajax啊?谁能告诉告诉我怎么写 。急急急 。。在线等好心人。。。。。

9个回答

u012401711
u012401711   2016.03.04 13:41
已采纳

html代码

                <tr>
                    <td style="width:15%">
                    一级
                    </td>
                    <td  style="text-align:left ;width:35%">            
                        <select name="unitPropertiesOneLevel" id="unitPropertiesOne" onchange="gradeChange()"style="width:150px">
                                <option value="" >&nbsp;&nbsp;</option>
                            <c:forEach var="unitProperty" items="${unitPropertyInfoList}">
                                <option value="${unitProperty.propertyCode }">${unitProperty.propertyName }</option>
                            </c:forEach>
                        </select>   
                    </td>
                    <td style="width:15%">
                        二级
                    </td>
                    <td style="text-align:left ;width:35%">
                        <select name="unitPropertiesTwoLevel" id="unitPropertiesTwoLevel" style="width:150px">
                            <option value="" >&nbsp;&nbsp;</option>
                        </select>   
                    </td>
                </tr>

u012401711
u012401711   2016.03.04 13:38

最好还是用ajax来进行取值,就是级联,和获取省市县是一样的道理,这是二级级联,例如

html代码



一级




  

${unitProperty.propertyName }
/c:forEach




二级



  



javaScript代码
            function gradeChange(){
                var unitPropertiesCode=$("#unitPropertiesOne").val();
                $("#unitPropertiesTwoLevel").empty();
                $.post("<%=url%>/jobUnits/ajaxUnitPropertiesCode.do",{'unitPropertiesCode':unitPropertiesCode},function(data){
                    var dataRole = eval(data);  
                    var html = "<option value=''>&nbsp;&nbsp;</option>";
                    for(var i=0;i<dataRole.length;i++){
                        html += "<option value='"+dataRole[i].propertyCode
                        +"'>"+dataRole[i].propertyName+"</option>";
                    }
                    $("#unitPropertiesTwoLevel").append(html);
                },"json");
            }
u013596119
u013596119   Rxr 2016.03.04 12:09

可以通过也可以不通过。。。如果通过ajax的话,用户选择项目的类别之后要进行ajax更新下面的下拉框内容,如果不通过ajax的话,可以在页面第一次加载的时候获得所有的信息,这样就不需要使用ajax,但是数据可能会出现更新不及时的情况

wutuobangoracle
wutuobangoracle   2016.03.04 12:19

最好通过ajax去做,先获取一波第一个下拉框数据,然后客户操作第一个下拉框在选取数据动作时会做onchange动作,这时利用onchange事件通过第一个下拉框选择的数据做ajax查询,查询出相关于第二个下拉框说需要的数据,把ajax返回来的数据放进第二个下拉框即可。

qq_19891827
qq_19891827   2016.03.04 12:27

通过ajax来做效果会更好,当你选择不同的项目类别时,通过select框的onchange事件,发送ajax请求到服务器端请求数据,然后通过js把对应的返回数据设置到新商户下显示出来就可以了。

keliyxyz
keliyxyz   2016.03.04 12:34

你可以一次把级联关系请求完。
然后在前端自己根据级联关系判断显示哪个。

Royal_lr
Royal_lr   Ds   Rxr 2016.03.04 12:53

这个简单就是一个二级级联给第一个下拉框一个change事件,,每次改变时,,第二个下拉框也同时改变,,

showbo
showbo   Ds   Rxr 2016.03.04 22:09

select联动而已javascript省市联动

WinsenJiansbomber
WinsenJiansbomber   2016.03.05 15:30

就是级联选择列表而以了,用JS更新第二个列表的选项不就好了。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
根据下拉框选择变化显示不同内容
html>head>title>Untitled Documenttitle>meta http-equiv="Content-Type" content="text/html; charset=gb2312">script language="JavaScript">function show()...{if (form1.select.value=="1") ...{Layer1.styl
下拉框值触发另一个下拉框
一个下拉框的值被选中后,触发另一个下拉框状态为可选! 若值为空则为不可选!
下拉选择框不同,文本输入框可用与不可用问题
下拉选择框不同,文本输入框可用与不可用,这个在初学者看来有些问题,其实主要是API看的不够,web端,要对HTML、CSS、JS的API要熟练,不然只能是心急,所以个人认为基础很重要, 下面就是实现代码: 首页 function onChange(){ //获取id为value时候的值 var val=document.getElementById('valu
javascript 根据下拉框选择显示不同的DIV
原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1        在前面的文章中,我们介绍了两类JavaScript小工具及其源码:浮动文本和弹出菜单。本文中,我们将继续介绍另外几个有用的JavaScript小工具,并着重说明其工作原理,因此你可以简单修改后应用到自己的程序中。
jQuery选择一个下拉框选项另一下拉框改变值
function gradeChange(){ //这个函数是要改变值下拉框的改变事件 $(&quot;#hehe&quot;).html(&quot;&quot;); //这个意思是每次选择前先把另一个下拉框清空 var fangqu = $(&quot;.type-sel&quot;).val(); $.ajax({ url : 'wzcx', type : 'post', data :...
下拉框选中值对应切换内容的效果
下拉菜单中控制显示或隐藏 车辆选择 凯美瑞 雷凌 保时捷 雷诺 车辆昵称 VIN 车牌号 发动机号
jQuery和Ajax结合选中select下拉框对应的值
$(function(){ //查询行业 $.ajax({ url:contextPath() + &quot;/......action&quot;, type:'get', success:function(data1){ var data2 = $.parseJSON(data1); var data = data2[0]; for (var i...
JS实现下拉列表中的联动(根据所选的text的值,改变另外一个下拉列表中国的值(text))
实现两个下拉列表中的联动问题,根据第一个下拉列表中的值改变另外一个下拉列表中的值,选择的是text的值,改变的也是text的值,如下面的下拉列表,根据国籍选择相应的证件类型(若非中国国籍,默认选择护照)                                       国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 籍:                
jsp页面中下拉框选择后,另一个input框数值改变,如何去实现
jsp页面中下拉框选择后,另一个input框数值改变,如何去实现
根据下拉列表框的值在当前页面显示不同的内容
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;script&amp;gt; var str2 = 0; /*1、定义复选框函数*/ function test(can) { str2 = can