商品类型的下拉框绑定一个事件,通过ajax获取属性
html代码这么写
<!-- 商品属性 -->
<table cellspacing="1" cellpadding="3" width="100%" style="display:none;" class="tab">
<tr><td>
<select name="Goods[type_id]">
<option value="0">选择商品类型</option>
<?php foreach ($typeData as $k => $v): ?>
<option value="<?php echo $v['id']; ?>"><?php echo $v['type_name']; ?></option>
<?php endforeach; ?>
</select>
<ul id="attr_container"></ul>
</td></tr>
</table>
// 为商品类型的下拉框绑定一个事件,通过AJAX获取属性
$("select[name=Goods[type_id]]").change(function(){
// 获取ajax获取这个类型的所有的属性
var type_id = $(this).val();
if(type_id == 0)
{
$("#attr_container").html("");
return false;
}
$.ajax({
type: "GET",
url : "__CONTROLLER__/ajaxGetAttrByTypeId/type_id/"+type_id,
dataType: "json",
success : function(data)
{
// 处理服务器返回的json数据
// 循环每一个属性,拼成一个li的字符串,最后放到上面的ul中
// 以下语法相当于PHP中的: foreach($data as $k => $v):
var li = "";
$(data).each(function(k,v){
li += "<li>";
li += v.attr_name + " : ";
/********* 根据属性的类型生成一个不同的表单元素 **************/
if(v.attr_type == 0)
{
// 唯一属性
if(v.attr_option_value == "")
li += "<input type='text' name='GoodsAttr["+v.id+"]' />";
else
{
// 先把可选值转化成一个数组
var _attr = v.attr_option_value.split(",");
li += "<select name='GoodsAttr["+v.id+"]'>";
for(var i=0; i<_attr.length; i++)
{
li += "<option value='"+_attr[i]+"'>"+_attr[i]+"</option>";
}
li += "</select>";
}
}
else
{
li += "<a href='javascript:void(0);' onclick='clone_row(this);'>[+]</a>";
// 单选属性
// 先把可选值转化成一个数组
var _attr = v.attr_option_value.split(",");
li += "<select name='GoodsAttr["+v.id+"][]'>";
for(var i=0; i<_attr.length; i++)
{
li += "<option value='"+_attr[i]+"'>"+_attr[i]+"</option>";
}
li += "</select>";
}
li += "¥<input name='GoodsAttrPrice[]' type='text' value='0.00' />元";
li += "</li>";
});
// 把构造好的LI放到UL中
$("#attr_container").html(li);
}
});
});
在控制器中这么写
public function ajaxGetAttrByTypeId($type_id){
$attrModel=M('attribute');
$data=$attrModel->where('type_id='.$type_id)->select();
echo json_encode($data);
}
商品类型的下拉框绑定一个事件,通过ajax获取属性的更多相关文章
- knockoutjs foreach array绑定 表格 下拉框绑定
转载http://desert3.iteye.com/blog/1480471 knockoutjs foreach array绑定 表格 下拉框绑定 博客分类: Javascript 动态表格使 ...
- EXT学习之——Ext下拉框绑定以及级联写法
/*******步骤有四个,缺一不可*********/ function () {xxxxxx = Ext.extend(construct, {InitControl: function () { ...
- easy ui 下拉级联效果 ,下拉框绑定数据select控件
html代码: ①两个下拉框,一个是省,另一个市 <tr> <td>省:</td> <td> <select id="ProvinceI ...
- robotframework文本类型的下拉框
对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...
- robotframework自动化系列:文本类型的下拉框
对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...
- jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上
这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit)
DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) // 设置下拉框 ...
- jquery 获取下拉框 某个text='xxx'的option的属性 非选中 如何获得select被选中option的value和text和......
jquery 获取下拉框 某个text='xxx'的option的属性 非选中 5 jquery 获取下拉框 text='1'的 option 的value 属性值 我写的var t= $(" ...
随机推荐
- PyQt(Python+Qt)学习随笔:窗口的布局设置及访问
老猿Python博文目录 老猿Python博客地址 在Qt Designer中,可以在一个窗体上拖拽左边的布局部件,在窗口中进行布局管理,但除了基于窗体之上进行布局之外,还需要窗体本身也进行布局管理才 ...
- nodjs html 转 pdf
var fs = require('fs');var pdf = require('html-pdf');//模块//读取html 文件 var html = fs.readFileSync('./s ...
- LibreOj #539. 「LibreOJ NOIP Round #1」旅游路线
题目链接 做完这道题,我深知当一个问题复杂度过高的时候,把一些可以分离的操作都分散开,可以大幅度降低复杂度..... 发现无论有多少钱,每到一个点后扩展到的距离被限制在 \(min(C, c[i])\ ...
- 8、Spring Cloud Zuul
1.Zuul简介 Zuul包含了对请求的路由和过滤两个最主要的功能. 路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础. 过滤器功能则负责对请求的处理过程进行干预,是实现请 ...
- 【Django 局域网配置】
默认方法启动django python manage.py runserver 这时启动的服务只能在本机访问,这是因为服务只向本机(127.0.0.1:8000)提供,所以局域网的其他机器不能访问. ...
- Windows远程报错:由于没有远程桌面授权服务器可以提供许可证,远程会话被中断
故障原因:Windowsserver超过两人的远程连接是收费的,有120天免费试用期,超过这个时间再连接就会报错. 解决方法一: 进行续费 解决方法二: 1,在运行里运行 mstsc /v:ip ...
- Error while instantiating 'org.apache.spark.sql.hive.HiveSessionStateBuilder': —— windows 开发环境使用spark 无法访问hdfs 问题解决
## 错误: ## 解决方案: 下载 hadoop 的可执行tar包,解压放在windows 本地,并配置环境变量. 在 解压后的文件夹的bin目录下放入两个文件: winutils.exe, had ...
- 死磕以太坊源码分析之Ethash共识算法
死磕以太坊源码分析之Ethash共识算法 代码分支:https://github.com/ethereum/go-ethereum/tree/v1.9.9 引言 目前以太坊中有两个共识算法的实现:cl ...
- Web服务器-并发服务器-单进程单线程非堵塞方式(3.4.3)
@ 目录 1.分析 2.代码 关于作者 1.分析 当socket去监听的时候,是堵塞的状态 通过tcp_sever_socket.setblocking(False)去设置不堵塞 当socket发现没 ...
- pandas的学习4-处理丢失数据
import pandas as pd import numpy as np ''' 有时候我们导入或处理数据, 会产生一些空的或者是 NaN 数据,如何删除或者是填补这些 NaN 数据就是我们今天所 ...