ajax ：同一表单根据下拉框1选中的内容改变下拉框2中内容

需求：同一个保存表单中，下拉框1有中国和海外两个选项；下拉框2默认展示数据库中所有数据；当用户选中下拉框1中的某一项时，要求动态改变下拉框2中的选项值（下拉框二需要读数据库）

下拉框一：

<tr class="prop">
	<td valign="top" class="name"><label for="title">IP分类:</label></td>
	<td valign="top" class="value">
		<select name="overseas" id="overseas" onchange="changeLoc()">
			<option <c:if test="${ipResources.overseas eq NULL}">selected</c:if> >-请选择-</option>
			<option value="0" >中国</option>
			<option value="1" >海外</option>
		</select>
	</td>
 </tr>

下拉框二：

<tr class="prop">
	<td valign="top" class="name"><label for="title">IP地理位置:</label></td>
	<td valign="top" class="value">
	<select name="location" id="location">
		<c:if test="${allIpLocation ne null}">
			<c:forEach var="ipLocation" items="${allIpLocation}">
				<option value=${ipLocation.locationEnShort} <c:if test="${ipResources.location eq ipLocation.locationEn}">selected</c:if> >-${ipLocation.locationEn}-</option>
			</c:forEach>
		</c:if>
	</select>
	</td>
</tr>

ajax请求

function changeLoc(){
$.ajax({
    url : "/ipResources/findIpLocation.do",
    data : $("#overseas").serialize(),
    type : "post",
    dataType : "json",
    success : function(data) {
        if (data.status != 0) {
            var ipLocation=data.data.ipLocationList;
            var options = '';
            console.log(ipLocation);
            $("#location option").remove();

            for (var i = 0; i < ipLocation.length; i++) {
            	//根据接口返回值，动态拼接属性值
                options += '<option value="' + ipLocation[i].locationEnShort + '">' + ipLocation[i].locationEn + '</option>';
            }
            //根据下拉框二的id，添加属性
            $('#location').append(options);

        }
    }

});

}

一：ajax优点

ajax可以局部刷新页面，提升用户体验。

本来准备写一下对ajax系统性的理解和总结的，写的时候发现目前对ajax的理解还不够深刻，再就是网上已经有总结的比较好的了，暂时不写

关于ajax系统性介绍：https://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html