如何进行js动态生成option?如何实现二级连动?

何为二级连动?

首先要明白什么是二级连动!顾名思义,就是一个动,另外一个也跟着一起动

看下面的例子:

这里有一个“市级”的选择列表框,还有一个“县级”的选择列表框,如果“市级”的选择列表框中的值发现变化,那么会连带“县级”的列表框发生变化。

function selectOrg(){
         var
selectNow = document.getElementById("city");      
//得到当前<select id="city">的对象
       
 var url =
‘<%=path%>/rb-addressBillServices.do‘;        
//发送请求的路径
         Ext.Ajax.request({                                                         
//利用Ext的AJAX向后台发送请求
              url:url,
              method:‘post‘,
            
 params:{
                    
 method:‘getOrgName()‘,                                   
//后台执行的方法名
                      responseType
:
‘text‘
              
 },
           
 success:
function(msg){ 
             
        var orgarr =
msg.responseText.split("|");        
//因为后台传递过来的是形式为 1,张三 | 2,李四 |
3,王五
                      for(var
i=0; i<orgarr.length;
i++){
                              
var org =
orgarr[i].split(",");                     //得到数组  1,张三
                              addOption(selectNow,org[1],org[0]);      
//调用addOption方法,进行赋值,下面
                     
}
              },
           
 failure: function
(){
                    
 Ext.Msg.alert(‘系统提示‘,‘保存失败!‘); 
              }
        
});
       }

这个方法是一个通用的动态添加Option,得到select的id,从数据库中查询到实际值id和显示值name,分别存入到text和value中

function addOption(objSelectNow, txt, val)
{   
          
 var objOption =
document.createElement("OPTION");       //
使用W3C标准语法为SELECT添加Option   
           
objOption.text =
txt;                                                          //得到显示值
            objOption.value
=
val;                                                      
//得到实际值
           
objSelectNow.options.add(objOption);                              //把每一个option添加到select中
 }

当页面加载的时候,我们已经能够把数据动态的存入到select下拉列表中了,那么,接下来,我们就要实现所谓的二级连动了:

在select 中添加对应的onchange事件,也就是当第一个“市级”下拉框中的值改变时,把第二个下拉框中的值进行改变:

添加函数:changeCity(this)

function
changeCity(obj){
              
  var selectNow =
document.getElementById("county");
               
 var url =
‘<%=path%>/rb-addressBillServices.do‘;
               
 if(obj.value ==
0){
                      
  for(var k=selectNow.length-1; k>=0;
k--){    
                              
 selectNow.options.removeChild(selectNow.options[k]);    
//这里一定要进行倒序删除
                        
}
                      
 selectNow.options.add(new
Option("请选择县","0"));
               
 }else{
                       
 Ext.Ajax.request({
                               
 url:url,
                               
 method:‘post‘,
                               
 params:{
                                          
responseType :
‘text‘,
                                         
 method:‘getOrgNameToCounty()&‘,
                                          
opval:obj.value
                                  },
                                
 success:
function(msg){ 
                                          
for(var k=selectNow.length-1; k>=0;
k--){
                                                 
 
selectNow.options.removeChild(selectNow.options[k]); 
                                           
 }
                                           
var orgarr =
msg.responseText.split("|");
                                         
  for(var i=0; i<orgarr.length;
i++){
                                                    var
org =
orgarr[i].split(",");
                                                   
addOption(selectNow,org[1],org[0]);
                                           
 }
                                 
 },
                                    failure:
function
(){
                                          
 Ext.Msg.alert(‘系统提示‘,‘保存失败!‘); 
                                   }
                           
 });
                 
  }
             
}

这里为什么要进行删除呢?你想啊,比如说:你在第一个下拉框中选中了“河北省”,那么,对应的在第二个下拉框中,就会出现在“河北省”中的各个市,现在问题就来了,假如你把第二个下拉框中的值不进行删除,那么,当你再选择“河南省”,那么恐怖的事情就发生了,刚才“河北省”中的各个市还存在第二个下拉框中,而点击了下拉框又会触发了onchange事件,那么第二个下拉框中就会存在“河北省”和“河南省”两个省份的市级信息,所以,我们要进行删除

知道了为什么要进行删除,那么我们还为什么要进行倒序删除呢?再举个例子,假如,我们就是正序进行的删除,那么,相应的代码会是这样:

for(var
k=0;k<selectNow.length;
k++){
                  selectNow.options.removeChild(selectNow.options[k]); 
         }
假设还是刚才的选择了“河北省”,那么其实在第二个市级下拉框中会存在一个类似的集合,里面包括河北省的11个市,当再选择“河南省”时,我们会删除原有的“河北省”的11个市的信息,那么运行for循环:

第一次:  k=0;   删除的元素  
selectNow.options[0]   剩下的元素会发生变化吗?[1,2,3],删除了list.get(0),那么2会成为list.get(0)

第二次:  k=1;   删除的元素  
selectNow.options[1]   删除了第二个元素,但第一个元素呢?没有进行删除

list = [1,2,3,4]

第一次删除 :   移除元素1   剩下元素 [2,3,4]

第二次删除 :   移除元素3   剩下元素 [2,4]

元素2永远也不会再被删除掉,所以,我们要进行倒序删除

如何进行js动态生成option?如何实现二级连动?,布布扣,bubuko.com

时间: 05-31

如何进行js动态生成option?如何实现二级连动?的相关文章

js动态生成下拉列表

经常需要用到js动态生成下拉列表的功能,记录下来备用. 示例需求:通过ajax请求,从后台获取用户姓名列表,并添加到下拉列表中.js代码如下: 1 function getNameList(){ 2 //如果是类似三级联表的功能,则需在刚开始是对下拉列表进行初始化,如: 3 $("#nameList").html("<option value='0'>请选择姓名</option>"); 4 $.getJSON(url+"getNam

js动态生成数据列表

我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js来动态生成表格. 首先我们需要先写好页面的样式. html部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

JS动态生成Input文本框 并获取文本框值

<!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= "Conte

js动态生成css代码

用js动态生成css代码 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中.但有些兼容性问题我们需要解决.首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决.还需要注意的就是在有些版本IE中一个页面上style标签数量是有限制的,如果超

使用Ghost.py爬取由JS动态生成的网页

很多网站的内容是由JS动态生成的,对于这样的网站查看它的源代码是看不出什么的,常规的爬虫对于这样的网站束手无策.我自己做了一个由JS生成的图片,并成功的用Ghost.py把它爬取了下来. 对于这么个图片看似平常,那么看下它的源代码 从源代码里看不出关于这张图片的地址,而图片的地址是在后端,由JS加载进去的,爬取这类网站需要模拟浏览器执行JS语句,得到执行JS后的页面,再实现爬取. 这里需要用到一个工具:ghost.py ghost.py是一个使用python编写的封装了webkit的网络工具.官

通过js动态生成文本框,怎么把文本框中的值传到java后台?

通过js动态生成文本框,怎么把文本框中的值传到java后台? 1 var lengths; 2 function insertrow2() //增加的一行方法2 3 { 4 newRow=document.all.yltable.insertRow(-1); 5 lengths = document.all.yltable.rows.length; 6 7 newcell=newRow.insertCell() ; 8 newRow.bgColor='#FFFFFF'; 9 newcell.al

JS动态生成表格后 合并单元格

JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示: 1. 没有合并之前的图如下: 2. 合并之后的图如下: 如上所示:是根据相邻的编号相同 进行单元格合并. 先看看实现后的效果再聊吧! JSfiddle链接地址如下: 点

js动态生成表格(原创)

原文:js动态生成表格(原创) 源代码下载地址:http://www.zuidaima.com/share/1571860936543232.htm 原生js实现,兼容各主流浏览器,提供生成表格,修改表格,验证合法性功能,可做学习参考 版权声明:本文为博主原创文章,未经博主允许不得转载.

JS 动态生成JSON对象

JS 动态生成JSON对象,一般用到JSON传递参数的时候,会用到. function onGeneratedRow(columnsResult) { var jsonData = {}; columnsResult.forEach(function(column) { var columnName = column.metadata.colName; jsonData[columnName] = column.value; }); viewData.employees.push(jsonDat