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

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

微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
java select 下拉选项框option定位_java select 下拉选项框opt
java select 下拉选项框opt [2021-02-05 09:44:01] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace( ...
QT_下拉选项框_Combo Box_使用
添加选项: 第一种:UI界面静态添加如下第二种:代码添加:如下 1.在mainwindow.h头文件中添加创建用函数 2.定义函数 void MainWindow::add_combobox(vo ...
微信小程序下拉选项框
效果图 test.js /*** 页面的初始数据*/data: {shows: false, //控制下拉列表的显示隐藏,false隐藏.true显示selectDatas: ['消费账户', '平台 ...
bootstrap下拉选择框选中事件_CAD制图初学入门之CAD软件中布局功能详解
很多CAD制图初学入门者在绘制图纸的过程中,如果没有对CAD软件中的功能了解透彻的话,在使用的时候就没有办法运用好这些功能.接下来就给CAD制图初学入门者详细介绍一下CAD布局功能吧! CAD布局功能 ...
[Ext JS]3.2.3 下拉选项框 Combobox
Combobox 的介绍 Combobox , 翻译过来是组合框, 也称为下拉框. 该组件类用于创建下拉单选项组件进行选值.对应的类是:Ext.form.field.ComboBox. Combobo ...
前端：下拉选项框及文本框的实现
标签介绍 form标签:用于表单类型的标签. select标签:一般和form标签连用,实现下拉框作用. option标签:一般要嵌套在select标签里面,用于实现选项. textarea标签:用来 ...
C# ComboBox 下拉选项框
1 命名空间及继承命名空间1:System.Windows.Forms 继承1:Object→MarshalByRefObject→Component→Control→ListControl→Com ...
python学习记录之---------PYQT5做工具（2）下拉选项框的使用
工具/版本 (1)安装环境:Windows7 64bit (2)使用版本Python3.6 (3)PYQT5 (4)eric6-6.1.0 基本的使用前文有介绍,直入正题初始形态选择省份后,列出对 ...

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

一、背景

二、前端代码

三、效果

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

最新文章

热门文章