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获取属性的更多相关文章

  1. knockoutjs foreach array绑定 表格 下拉框绑定

    转载http://desert3.iteye.com/blog/1480471 knockoutjs foreach array绑定 表格 下拉框绑定 博客分类: Javascript   动态表格使 ...

  2. EXT学习之——Ext下拉框绑定以及级联写法

    /*******步骤有四个,缺一不可*********/ function () {xxxxxx = Ext.extend(construct, {InitControl: function () { ...

  3. easy ui 下拉级联效果 ,下拉框绑定数据select控件

    html代码: ①两个下拉框,一个是省,另一个市 <tr> <td>省:</td> <td> <select id="ProvinceI ...

  4. robotframework文本类型的下拉框

    对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...

  5. robotframework自动化系列:文本类型的下拉框

    对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...

  6. jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上

    这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...

  7. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  8. DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit)

    DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) // 设置下拉框 ...

  9. jquery 获取下拉框 某个text='xxx'的option的属性 非选中 如何获得select被选中option的value和text和......

    jquery 获取下拉框 某个text='xxx'的option的属性 非选中 5 jquery 获取下拉框 text='1'的 option 的value 属性值 我写的var t= $(" ...

随机推荐

  1. PyQt(Python+Qt)学习随笔:Qt Designer中toolBar的orientation属性和iconSize属性

    orientation属性 orientation属性用于确认工具栏是水平方向还是垂直方向,这个属性对于QMainWindow中的工具栏来说没有意义,因为QMainWindow中的工具栏支持在上下左右 ...

  2. PyQt(Python+Qt)学习随笔:Designer中不能编辑信号和槽的问题

    新建了一个窗口部件,在窗口上添加了相关布局,再设置窗口窗口的布局为垂直布局,窗口设计好界面后如图所示: 可以看到窗口是QWidget类,窗口上从上到下有三个布局,窗口自身的布局为垂直布局,布局名为ve ...

  3. 开源脉冲神经网络深度学习框架——惊蛰(SpikingJelly)

    开源脉冲神经网络深度学习框架--惊蛰(SpikingJelly) 背景 近年来神经形态计算芯片发展迅速,大量高校企业团队跟进,这样的芯片运行SNN的能效比与速度都超越了传统的通用计算设备.相应的,神经 ...

  4. COMMENT SQL二次注入

    这题目太顶了进去随便发个贴,出现登录已经提示用户名和密码了,弱密码登录(得自己去爆破)zhangwei666即可 没啥思路,扫下目录试试,kali的dirb扫到.git泄露githacker得到源码看 ...

  5. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  6. Java集合源码分析(九)——HashSet

    简介 HashSet就是一个集合,里面不能有重复的元素,元素也是无序的. HashSet其实就是调用了HashMap实现的,所以,它也不是线程安全的. HashSet通过iterator()返回的迭代 ...

  7. ftp之filezilla使用记录

    1.550 can't access file错误 我们在客户端查看文件时,有些文件被另外的程序占用了,就会出现这个错误.比如,log日志文件.解决办法:在server端,找到settings设置,找 ...

  8. 新手关于C++ cin 的返回值

    cin是C++的标准输入流,其本身是一个对象,并不存在返回值的概念. 不过经常会有类似于 while(cin>>a) 的调用,这里并不是cin的返回值,应该关注">> ...

  9. 清轩网络引导页HTML源码

    本文有216个文字,大小约为1KB,预计阅读时间1分钟后续可以自己修改,模板还是挺好看的 本网站为清轩编写完成,也就是清轩网络自用的网站官网,界面非常好看, 只不过网站无后台,编辑动态的时候需要手动加 ...

  10. 跨站点脚本编制 - SpringBoot配置XSS过滤器(基于mica-xss)

    1. 简介   XSS,即跨站脚本编制,英文为Cross Site Scripting.为了和CSS区分,命名为XSS.   XSS是最普遍的Web应用安全漏洞.这类漏洞能够使得攻击者嵌入恶意脚本代码 ...