ajax点击事件

ajax点击事件

1,首先在页面一个标签里加一个点击事件:

  我这里是写了一个下拉框的点击事件

<select name="cityid" onclick="cities()" id="cityid">
          <option value="0">-请选择-</option>
          <c:forEach items="${citys}" var="c">
        <option value="${p.provinceid}">
          ${p.province}
        </option>

</c:forEach> </select>

2,在script标签里写点击事件:

  也可以引入一个js文件

<script type="text/javascript">
function cities(){
        var cityid=$(#cityid).val();//定义一个变量来保存前端页面下拉框选中的值的id;if(cityid!=0){//判断前端有没传过来值
            $.ajax({
                type: "POST",//请求格式
                data: {"cityid": cityid},//请求参数
                url:"${pageContext.request.contextPath}/info/area",//请求地址
                dataType: "json",//返回类型
                success: function (data) {
                    $("#area").html("");
                    for (var i=0;i<data.length;i++){
                        var m = " <option value=‘" + data[i].areaid + "‘>" + data[i].area + "</option>";
                        $("#area").append(m);
                    }
                }
            })
        }
    }
</script>

3,点击事件之后把值传到下一个下拉框里:

<select name="area" id="area">
  <option value="0">-请选择-</option>
  <c:forEach items="${areas}" var="a">
  //也就是把值传到这里,传的是上面事件里for循环里面的标签跟值   </c:forEach> </select>

4,效果展示:

也就是点击市辖区这个下拉框里面值,下个下拉框出现对应的值

ajax点击事件

 

ajax点击事件

上一篇:CSS-display和visibility


下一篇:js控制table下的文本框隐藏显示