js 省市二級聯動選單thinkphp mysql js

阿新 • • 發佈：2019-01-16

參考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"
onsubmit="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" onchange="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>

js 省市二級聯動選單thinkphp mysql js

js 省市二級聯動選單thinkphp mysql js

JS-省市二級聯動

Js省市二級聯動

html+js省市二級聯動（推薦）

JQuery EasyUI Combobox 實現省市二級聯動選單

分別使用js和JQuery實現省市二級聯動

Ajax,js實現省市二級聯動

原生js實現省市二級聯動

用js解析xml實現省市二級聯動

很簡單的html+js實現省市二級聯動

用JS實現省市二級聯動

原生js的二級聯動

JS實現二級聯動 (createTextNode，createElement )

利用js實現二級聯動的簡單例項

js的二級聯動實現省份城市的選擇

省市二級聯動基礎數據

微信小程序picker組件 - 省市二級聯動

JavaScript實際應用簡單二級聯動選單實現

基於element ui下拉框的省市二級聯動Vue元件

中國城市程式碼json，省市二級聯動json

js 省市二級聯動選單thinkphp mysql js

相關推薦