首页 > 其他 > 详细

easyui combobox实现动态级联

时间:2014-03-26 19:43:10      阅读:632      评论:0      收藏:0      [点我收藏+]

easyui combobox实现动态级联,页面上有三个combobox根据前两个中任意一个的选择值,动态生成第三个的数据选项

<td valign="top">
 <select id="area1" name="area" class="easyui-combobox" name="area"  style="width:150px;">
        <option value="‘E‘">East</option>
        <option value="‘N‘">North</option>
        <option value="‘H‘">Center</option>
        <option value="‘S‘">South</option>
        <option value="‘C‘">NorthEast</option>
        <option value="‘W‘">Western</option>
    </select>
</td>
<td valign="top">
<select id="level1" class="easyui-combobox" name="level" style="width:100px;">
        <option value="‘A+‘,‘A-‘,‘A‘">A</option>
        <option value="‘B‘">B</option>
        <option value="‘C‘">C</option>
        <option value="‘D‘">D</option>
    </select>
    </td>
<td valign="top">
   <input id="shopcode" style="width:210px;"  value=‘--select a shop--‘ class="easyui-combobox"
   			id="shop"
            name="language"
            data-options="
                    url:‘getShop.php‘,
                    valueField:‘id‘,
                    textField:‘text‘,
                    panelHeight:‘150px‘
            "/>
  
   </td>
  <td valign="top"><input type="button" id="but2"  value="go"  /></td>

动态生成

	<script>
$().ready(function(){$(‘#area1‘).combobox({
    onChange:function(newValue,oldValue){
    	$(‘#shopcode‘).combobox(‘reload‘, ‘getShop.php?area=‘+newValue+"^^"+$(‘#level1‘).combobox(‘getValues‘));
    }
});

$(‘#level1‘).combobox({
    onChange:function(newValue,oldValue){
    	$(‘#shopcode‘).combobox(‘reload‘, ‘getShop.php?level=‘+newValue+"^^"+$(‘#area1‘).combobox(‘getValues‘));
    }
});
});

</script>



easyui combobox实现动态级联,布布扣,bubuko.com

easyui combobox实现动态级联

原文:http://blog.csdn.net/bailin0007/article/details/22183345

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!