下拉选项框选中之后，通过ajax请求服务器，填充页面其他元素的value值

一、背景

在后台添加产品，有一些东西需要提前在数据库获取，此时，运营显然是不知道该如何操作的，我们需要做的就是方面运营人员经营后台，把需要用到的字段直接查出来，显示在页面上。

如图：



这是需求图

二、前端代码

（1）给下拉框加onchange()方法

<select name="type" id="type"  onchange="select()">
<option value="-1" selected>产品类型</option>
<option value="0" >净水机</option>
<option value="1">智能锁</option>
<option value="2">智能窗帘</option>
</select>

此处最好用onchange()方法，因为onclick()会不兼容某些浏览器，比如IE，而onchage()方法的兼容性更好一些。

（2）通过ajax请求服务器

function select(){
//获取被选中的option标签
var type = parseInt($('select  option:selected').val());
$.ajax({
url: "{{url('/user/goods_select')}}",
type: "GET",
dataType: "json",
//把获取到的value值传给服务器
data: {type: type},
success: function(r) {
if (!r.err) {
//请求成功的话，就给另外两个文本框赋值
var product = r.data[0]['product'];
var templet = r.data[0]['templet'];
console.log(product);
//把服务器返回的值取出来，赋值
$("#product").attr("value",product);//填充内容
$("#templet").attr("value",templet);//填充内容
} else {
alert(r.err);
}
}
});
}

关于jquery获取值和赋值的方法，不熟悉的话可以看：

http://blog.csdn.net/ljfphp/article/details/78650337

（3）服务器接收数据，并处理

public function select(Request $req
ba05
uest)
{
//获取传过来的tyoe
$type = $request->input('type');
//根据type赋值
if($type!= null) {
$type = intval($type);
switch ($type) {
case 0:
$product = 'NaB02VhEhZ2';
$templet = '0401';
break;
case 1:
$product = 'NaB02VhEhZ2';
$templet = '0401';
break;
case 2:
$product = 'NaB02VhEhZ2';
$templet = '0401';
break;
}
}else{
return MyResponse::error();
}
$params[] = [
'product'=>$product,
'templet'=>$templet,
];
//把获取的值返回给页面
return MyResponse::success($params);

}

这边我只是试一下，随便给几个字符串试试。大家可以根基自己的逻辑，查询数据库，然后返给页面你想返回的值即可。

三、效果

当选中智能锁的时候，我们这边直接把下面的内容给填充了。这样就能方面运营。就算他们不知道这些都代表什么意思，但不重要，他们只要会选种类即可。

end