下拉选项框选中之后，通过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