下拉选项框选中之后，通过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 $request)  {  //获取传过来的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