js select级联,上面分类,下面是内容

js select级联,上面分类,下面是内容。

js级联效果如下:

分类:
请选择
水果
蔬菜
其他

内容:

html和js代码如下:

      <html>      <head>         <title>js select级联,上面分类,下面是内容</title>        <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>            </head>      <body>                        <div>                    <label for="form-field-select-1">分类:</label>                    <select class="form-control" onchange="changeType(this)">                        <option value="">请选择</option>                                                         <option value="1">水果</option>                                            <option value="2">蔬菜</option>                                    <option value="3">其他</option>                                                </select>                </div>                <div>                    <label for="form-field-select-1">内容:</label>                    <select id="itemId" class="form-control" multiple="multiple">                                                                     </select>                </div>             

<script type="text/javascript">var waItemsJson = [{"type_id":1,"id":11,"item_code":"苹果","item_name":"苹果"},{"type_id":1,"id":11,"item_code":"香蕉","item_name":"香蕉"},{"type_id":1,"id":11,"item_code":"梨","item_name":"梨"},{"type_id":2,"id":11,"item_code":"白菜","item_name":"白菜"},{"type_id":2,"id":11,"item_code":"青菜","item_name":"青菜"},{"type_id":3,"id":11,"item_code":"可乐","item_name":"可乐"}];

function changeType(obj){    removeAll("itemId");    for(var i=0;i<waItemsJson.length;i++){        if(obj.value==waItemsJson[i].type_id || obj.value=="" ){            addOption("itemId",waItemsJson[i].item_name,waItemsJson[i].item_name);        }    }}

/** * 删除objId下所有的options */function removeAll(objId){    var obj=document.getElementById(objId);    obj.options.length=0;}/** * objId下 添加 option */function addOption(objId,text,value){    var obj=document.getElementById(objId);    obj.options.add(new Option(text,value)); //这个兼容IE与firefox}</script>          </body>      </html>  
时间: 2024-10-17 01:28:32

js select级联,上面分类,下面是内容的相关文章

js控制select选中显示不同表单内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jqery对于select级联操作

问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据 处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是change事件.代码如下图所示: 通过select这个节点的val获取一个id值再通过id值进行判断就能很好的解决这种问题了. 以下内容转自网络以便学习 总结: jqery对select的常用操作: jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id

jQuery实现select级联

使用Html5的数据属性(data-*)Map级联关系,代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Select级联</title> 5 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 6 <script type=text/javascript>

不用js实现鼠标放上去改变文字内容

css样式 .remind span {display:block;margin-top:-22px;} .remind a:hover {padding-top:22px;}.remind a {float:left;overflow:hidden;}.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;} html代码 <div class="remind"><a href=&

JS 省市区级联 修改地址操作时的默认选中方法

省市区级联JS控件 下载地址http://files.cnblogs.com/bin-pureLife/%E5%B0%8F%E5%9B%BE%E6%A0%87.zip function update(province,city,county){ $("#s_province option").each(function(){ if($(this).val()==province){ $(this).attr('selected',true) change(1); } }); $(&qu

万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版!

转--http://www.2cto.com/kf/201402/277535.html 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版! 2014-02-11      0个评论    来源:卡布洛技术专栏   收藏    我要投稿 要求:动态输入内容,点击post生成内容条,实现自动翻页! 废话不多说,直接上代码: js代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Select显示多级分类列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>在下拉列表中显示的多级树形菜单</t

JavaScript解决select下拉框中的内容太长显示不全的问题

JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

js实现级联菜单(没有后台)

html代码: <!-- js级联菜单 --> <div id="cascMenu"> <select id="select" onchange="getLocal(this.selectedIndex)"> <option>请选择</option><!-- selectedIndex=0 --> <option>北京</option><!--