JavaScript Ajax Json实现上下级下拉框联动效果实例代码

前端技术 2023/09/09 JavaScript

最近尝试做出一个部门和人员的下拉框联动功能，部门和人员的对应关系是1:N

复制代码 代码如下:

<div class=\"forntName\">部门</div>
 <div class=\"inpBox\">
 <select  name=\"department\" id=\"department\"  onchange=\"change();\" style=\"width:200px;\" >
 <option value=\'-1\'>请选择</option>
 <s:iterator value=\"departmentList\">
  <option value=\'<s:property value=\"departmentCode\"/>\'><s:property value=\"departmentName\"/></option>
 </s:iterator>
 <select> 
 </div>
<SPAN style=\"WHITE-SPACE: pre\"> </SPAN><div class=\"forntName\">人员</div>
 <div class=\"inpBox\">
 <select name=\"workorderOperator\" id = \"workorderOperator\" style=\"width:200px;\">

 <s:iterator value=\"userList\">
  <option value=\'<s:property value=\"userName\"/>\'><s:property value=\"userName\"/></option>
 </s:iterator>
 </select>
 </div>

部门下拉框的onchange()事件走一个AJAX方法，返回一个JSON对象(JSON里放的是个LIST)。

js方法在此页面的写法:

复制代码 代码如下:

<script type=\"text/javascript\">
function change(){    
    var departmentCode =$(\"#department\").val(); 

    var params = { 
        \'departmentCode\':departmentCode 
    }; 
    $.ajax({
        type: \'get\',
        url: \"departmentChangeEvent.shtml\",
        cache: false,
        data: params,
        dataType: \'json\',
        success: function(data){
      var sel2 = $(\"#workorderOperator\"); 
      sel2.empty(); 
      if(data==null)
          {
       sel2.append(\"<option value = \'-1\'>\"+\"部门人员为空\"+\"</option>\");
          }
      var items=data.list;
      if(items!=null)
         {
        for(var i =0;i<items.length;i++)
           {
            var item=items[i];
            sel2.append(\"<option value = \'\"+item.userName+\"\'>\"+item.userChinesename+\"</option>\");
           };
          }    
      else
          {
       sel2.empty(); 
          }
        },
        error: function(){
            return;
        }
    });
    //$.post(url, params, callback); 
} 
</script> 

本文地址：https://www.stayed.cn/item/23952

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案