首页 > Web开发 > 详细

ajax点击事件

时间:2021-04-09 13:26:17      阅读:33      评论:0      收藏:0      [点我收藏+]

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点击事件

原文:https://www.cnblogs.com/597h/p/14635960.html

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