PHP表单省市县三级联动,用php做省份的三级联动 附带数据库

可以把它做成小插件的形式,以后需要,可以随时调来看一下怎么来做先来写个div然后,再引入js包无标题文档引入的js文件,取名为sanji.js然后来看看js文件是怎么写的$(document).ready(function(e) {//向DIV里面扔三个下拉var str = "";$("#sanji").html(str);FillSheng();FillShi();FillQu();//选中项...
摘要由CSDN通过智能技术生成

可以把它做成小插件的形式,以后需要,可以随时调

来看一下怎么来做

先来写个div然后,再引入js包

无标题文档

引入的js文件,取名为sanji.js

然后来看看js文件是怎么写的

$(document).ready(function(e) {

//向DIV里面扔三个下拉

var str = "";

$("#sanji").html(str);

FillSheng();

FillShi();

FillQu();

//选中项变化

$("#sheng").change(function(){

FillShi();

FillQu();

})

$("#shi").change(function(){

FillQu();

})

});

//填充省的方法

function FillSheng()

{

var pcode = "0001"; //父级代号

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){ //回调函数

var hang = data.split("|"); //根据行与行的分隔符来拆

var str = "";

for(var i=0;i

{

var lie = hang[i].split("^"); //列与列的分隔符来拆

str += ""+lie[1]+""; //中间显示地区名称

}

$("#sheng").html(str); //把显示的地区名称填充进去

}

});

}

//填充市的方法

fu

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Select 省市三级联动的实现,一般需要以下步骤: 1. 引入相关组件和数据 你需要引入以下组件: - vue-select:用于选择省、市、 - axios:用于获取省市数据 还需要定义三个数组,分别存放省、市、的数据。 2. 获取省市数据 你可以使用 axios 发起请求获取省市数据,然后在获取到数据后将其存储到对应的数组中。 3. 实现省市三级联动 在 vue-select 中,你可以通过监听选中的值来动态改变下一级的选项列。 例如,当选择了一个省份时,你可以根据该省份的 ID 获取该省份下的所有市,然后更新市的选项列。同理,当选择了一个市时,你可以根据该市的 ID 获取该市下的所有,然后更新的选项列。 4. 绑定选中的值 最后,你需要将选中的省、市、的值绑定到对应的变量中,以便在单提交时使用。 以下是一个简单的示例代码: ``` <template> <div> <v-select v-model="province" :options="provinces" @input="onProvinceChange"></v-select> <v-select v-model="city" :options="cities" @input="onCityChange"></v-select> <v-select v-model="county" :options="counties"></v-select> </div> </template> <script> import axios from 'axios'; import VueSelect from 'vue-select'; export default { components: { VueSelect, }, data() { return { provinces: [], cities: [], counties: [], province: '', city: '', county: '', }; }, mounted() { this.getProvinces(); }, methods: { getProvinces() { axios.get('/api/provinces').then((response) => { this.provinces = response.data; }); }, getCities(provinceId) { axios.get(`/api/cities/${provinceId}`).then((response) => { this.cities = response.data; }); }, getCounties(cityId) { axios.get(`/api/counties/${cityId}`).then((response) => { this.counties = response.data; }); }, onProvinceChange() { if (this.province) { this.getCities(this.province.id); } else { this.cities = []; } this.city = ''; this.county = ''; }, onCityChange() { if (this.city) { this.getCounties(this.city.id); } else { this.counties = []; } this.county = ''; }, }, }; </script> ``` 其中,`getProvinces()`、`getCities()` 和 `getCounties()` 方法分别用于获取省、市、的数据;`onProvinceChange()` 和 `onCityChange()` 方法分别用于监听省、市的选中值的变化,并更新市、的选项列。 在模板中,你需要使用 `v-select` 组件来渲染下拉框,并使用 `v-model` 指令来双向绑定选中的值。同时,你需要使用 `@input` 事件来监听选择项的变化,并调用对应的方法更新选项列

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值