js 省市二级联动菜单thinkphp mysql js

最新推荐文章于 2021-01-28 06:54:45 发布

小贝壳AI

最新推荐文章于 2021-01-28 06:54:45 发布

阅读量1k

点赞数

分类专栏： thinkphp

本文链接：https://blog.csdn.net/ganlijianstyle/article/details/52613962

版权

thinkphp 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

参考http://blog.csdn.net/wmsjlihuan/article/details/20700763

省市二级联动菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="__PUBLIC__/script/ajaxfileupload.js"></script>
<div class="pageContent">
<form method="post" action="__URL__/insert/navTabId/__MODULE__"
class="pageForm required-validate"
οnsubmit="return validateCallback(this, dialogAjaxDone)">
<div class="pageFormContent" layoutH="58">

<label> 选择类型：</label>
<select name="province" id="province" class="required">
<option value="">类型</option>
<volist name="areaList" id="t">
<option value="{$t.id}">{$t.areaName}</option>
</volist>
</select>

<label> 选择栏目：</label>
<select name="city" id="city" class="required">
<option value="" selected="selected">栏目</option>
</select>


<div class="unit">
<label>栏目名字：</label> <input type="text" id="title" name="title"
class="required" size="50" maxlength="50" value="{$vo.title}" />
</div>
<div class="unit">
<label>栏目链接：</label>
<textarea rows="2" cols="80" id="introduction" name="introduction"
class="required"></textarea>
</div>

<div>
<div class="unit">
<label>LOGO图片：</label> <input type="file" size="30" id="uploadUrl"
name="uploadUrl" οnchange="uploadImg('1')"> <input
type="hidden" id="img" name="img" class="required" //>
</div>
<div id="div" style="display: none;">
<label>图片预览：</label> <img src="" id="review_img1" />
</div>
</div>


</div>
<div class="formBar">
<ul>
<li><div class="buttonActive">
<div class="buttonContent">
<button type="submit">提交</button>
</div>
</div></li>
<li><div class="button">
<div class="buttonContent">
<button type="button" class="close">取消</button>
</div>
</div></li>
</ul>
</div>
</form>

</div>
<script type="text/javascript">

var newstypeArr = [];
$(document).ready(function () {
$.ajax({
timeout: 3000,
async: false,
type: "POST",
url: "__URL__/getTypeList",
dataType: "json",
data: {
warehouse: $("#province").val(),
},
success: function (data) {

newstypeArr=data;

for (var i = 0; i < data.length; i++) {

// $("#city").append("<option value=>" + data[i].typename + "</option>");

}
}
});
});

var province = document.getElementById('province');
var city = document.getElementById('city');


//生成市县、区市'
//@current为当前选择的select节点，即父类节点
//@child为子类点
//@childArr为子节点数组
function showChild(current, child, childArr) {
var currentValue = current.value;
var count = childArr.length;
//每次切换市'把城市的子option长度设置市',即清除城市的选择,DOM对象select元素是长度是子option的个市'
child.length = 1;
for(var i = 0; i < count; i++) {
//判断所选的值即父类，与当前节点第一个数组元素是否相市'
if(currentValue == childArr[i].areaId) {

//不取第一个数组元市'因为第一个是父类，所以j市'开始，而不市'
var childOption = document.createElement('option');
//ie不支持option对象的value,所以加childOption.text
childOption.value = childArr[i].areaId;
childOption.text = childArr[i].typename;
child.options.add(childOption);
}
}
}
//省份改变市'
province.onchange = function() {
showChild(province, city, newstypeArr);
}

function uploadImg(num){
$.ajaxFileUpload({
type: "POST",
url: "__APP__/Upload/upload",
secureuri:false,
fileElementId:"uploadUrl",
dataType: "json",
success: function(msg){
if (msg.status == 1)
{
$("#review_img"+num).attr("src","__PUBLIC__/upload/images/"+msg.data);
var urlsrc = $("#review_img"+num).attr("src");
var u = urlsrc.substring(urlsrc.lastIndexOf("/")+1);
$("#img").val(u);
$("#div").show();
}else{
alert("1__"+msg.status);
alert(msg.data);
}
},error:function(data, status, e){
alert(status+"_____");
for(var s in data){
alert(data[s]);
}
}
});
}

</script>