easyui combobox实现动态级联

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>



你可能感兴趣的:(combobox,动态生成,easyuui)