商品类型的下拉框绑定一个事件,通过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);
}
最新文章
- BZOJ4488: [Jsoi2015]最大公约数
- Linux解压命令(tar)
- Ubuntu下两个gcc版本切换
- android 学习随笔二十三(动画:Fragment )
- jquery.chosen.js实现模糊搜索
- UI3_UILabel
- 1. 连接字符串的创建 - Lazy.Framework从零开始设计自己的ORM架构
- Codeforces 437B The Child and Set
- .net string format
- IE读取并显示本地图像文件的方法
- C++编写一个简单的DLL
- 201521123103 《java学习笔记》 第十二周学习总结
- Android 使用EventBus发送消息接收消息
- Android双击退出
- jsp中【<;%=request.getContextPath()%>;】项目路径
- windows上编译zlib-1.2.8
- elementui分页点击详情返回分页样式
- PythonStudy——运算符优先级 Operator precedence
- Build path specifies execution environment J2SE-1.5. There are no JREs installed in the workspace that are strictly compatible with this environment.
- s4-9 二层设备
热门文章
- 性能测试基础——(MEN)
- 1、pytorch写的第一个Linear模型(原始版,不调用nn.Modules模块)
- NodeService Ensure that Node.js is installed and can be found in one of the PATH directories
- 软工个人项目 ——wc.exe
- Number.isNaN和isNaN
- VS调试相关
- windows 远程连接报错
- JavaScript:记录一些字符串和数组常用的方法
- 简洁404页面源码 | 自适应404页面HTML好看的404源码下载
- 日期格式化:推荐使用SimpleDateFormat