Ajax 二级联动

准备工作导入vue&jquery的js包

导包部分省略不写

接下来应该先写html页面的代码

<div id="app">
	<form>
		手机号:<input type="number" v-model="persons.phone" id="phone">
		<span id="error"></span><br>
		姓名:<input type="text" v-model="persons.name"><br>
		级部:
		<select v-model="persons.gid" v-on:change="doCheckCname()">
			<option value="0">--请选择级部--</option>
			<option v-for="gname in grade" :value="gname.ggid">{
  {gname.gname}}</option>
		</select>
		班级:
		<select v-model="persons.cid">
			<option value="0">--请选择班级--</option>
			<option v-for="cla in cla" :value="cla.ccid">{
  {cla.cname}}</option>
		</select>
		<br>
		性别:<input type="radio" value="男" v-model="persons.sex">男
			<input type="radio" value="女" v-model="persons.sex">女<br>
		地址:
			<select id="sheng"
  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ajax 省市二级联动是一种常见的前端技术,它可以实现在选择省份后,自动加载该省份下的城市列表,从而实现省市二级联动的效果。下面是一个简单的实现步骤: 1. 在 HTML 页面中,定义两个下拉框,一个用于选择省份,一个用于选择城市。 2. 在 JavaScript 中,使用 Ajax 技术向服务器请求省份列表,并将其填充到省份下拉框中。 3. 当用户选择省份时,使用 Ajax 技术向服务器请求该省份下的城市列表,并将其填充到城市下拉框中。 下面是一个简单的代码示例: HTML 代码: ``` <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> ``` JavaScript 代码: ``` // 请求省份列表 $.ajax({ url: '/api/provinces', success: function(data) { // 将省份列表填充到省份下拉框中 var $province = $('#province'); $.each(data, function(index, province) { $province.append('<option value="' + province.id + '">' + province.name + '</option>'); }); } }); // 当用户选择省份时,请求该省份下的城市列表 $('#province').on('change', function() { var provinceId = $(this).val(); if (provinceId) { $.ajax({ url: '/api/cities?provinceId=' + provinceId, success: function(data) { // 将城市列表填充到城市下拉框中 var $city = $('#city'); $city.empty().append('<option value="">请选择城市</option>'); $.each(data, function(index, city) { $city.append('<option value="' + city.id + '">' + city.name + '</option>'); }); } }); } else { // 如果用户选择了“请选择省份”,则清空城市下拉框 $('#city').empty().append('<option value="">请选择城市</option>'); } }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值