谁会thinkphp +AJAX 的二级联动下拉框 要连接数据库的 200
因为是对AJAX一点都不会 所以希望是一个已经做好的成品 可以给我参考 展开
html:
<div class="search-choice">
<div class="span2"><div class="span4 ben">选择日期:</div><input placeholder="请输入日期" class="laydate-icon span8" name="sd" id="sd"></div>
<div class="span2"><div class="span4 ben">到</div><input placeholder="请输入日期" class="laydate-icon span8" name="ed" id="ed"></div>
<div class="span3"><div class="span4 ben">选择产品:</div><select name="product_name" id="product_name" class="span8 select2_category" data-placeholder="请选择产品名称" tabindex="1">
<?=R('Base/cates',array("",3))?>
</select></div>
<div class="span3"><div class="span4 ben">选择计费ID:</div><select name="txtName" id="txtName" class="span8 select2_category" data-placeholder="请先选择产品名称" tabindex="2">
<option>请先选择产品名称</option>
</select></div>
<div class="span2"><span><input type="button" value="查询" class="btn blue" id="search"></span></div>
</div>js:
window.onload = setTxt();
$("#search").on('click',function(){
load_data();
});
// initiate layout and plugins
$("#product_name").on("change",setTxt);
$("#txtName").on("change",function(){
load_data();
});
/* window.onload = function(){
$("#txtName").attr("disabled","disabled");
}*/function setTxt(){
var product_name = $("#product_name").val();
if(!product_name){
$("#txtName").html("<option>请先选择产品名称</option>").select2({
placeholder: "请选择",
allowClear: true
});
load_data();
return;}
$.ajax({
url:"/Base/setTxtName",
type:"post",
data_type:"json",
data:{product_name:product_name},
success:function(data){
data = $.parseJSON(data);
if(data.status == 1){
var html = "";
if(data.data == ""){
html = "<option value=''>该产品下无数据</option>";
}else{
$.each(data.data,function(k,v){
html = html+"<option value='"+ v.txtname+"' control='"+v.id+"' income-type='"+ v.income_type+"'>"+v.txtname+"</option>";
});
}
$("#txtName").html(html).select2({
placeholder: "请选择",
allowClear: true
});
load_data(); //自动查询加载查询结果
}
}
});
}PHP:
//无限极分类
function cates($selected_id="",$selectedTable,$own=false)
{
$table = C("TABLE");
$tbs = $table[$selectedTable]; //根据传参选择表，表信息写在配置中
$cates = M("data_".$tbs["tb"]);
$p=$cates->select();
if(count($p)>0)
{
if($own === false){ //默认第一个
echo '<option value=""></option>';
}
foreach($p as $o)
{
echo '<option value="'.$o["id"].'" data="'.$o[$tbs["fd"]].'"';
if($selected_id==$o['id'])
echo('selected="selected" ');
if($tbs["tb"] == "pay"){
if($o['type']==0){
echo('lx="1" ');
}else{
echo('lx="2" ');
}
}
echo('control="'.$o["id"].'">');
echo($o[$tbs["fd"]]);
echo '</option>';
}
}
}
function setTxtName(){
if(isset($_POST["product_name"]) && $_POST["product_name"]){
$product_name = I("post.product_name");
$bid = $_SESSION["admin"]["bid"];
$uid = $_SESSION["admin"]["uid"];
if($bid != 16 && $uid !=8){
$where["uid"] = $uid;
}
$pkg = M("test_pkg");
$where["product_name"] = $product_name;
$where["isdelete"] = 0;
$row = $pkg->where($where)->field("txtName,id,income_type")->select();
echo json_encode(array("status"=>1,"data"=>$row));
}
}
效果：
