JS与Jquery之动态添加下拉框select并级联改变事件

JavaScript013

JS与Jquery之动态添加下拉框select并级联改变事件,第1张

1.可以动态添加多个下拉框,可减少下拉框

2.选中第一个下拉框的任意一个值，同时第三个下拉框的值跟着改变，显示对应的数据。

ps:what?光动态添加就足以。。。。赋值还不能直接赋，而是添加下拉时就赋值。。。。。经过百般折磨，头发掉了n根，最终通过巧妙的思路解决了，在此记录下。若对你有所帮助，点赞加关注吧！后续及时更新。

第一个下拉选项显示

选择下拉项，同时加载数据到第三个下拉框

注：在这里直接去掉了第二行的标签

为了获取改变数据的行，试了很久，动态生成的下拉框无法获取到索引，所以才想到了使用id，并且给id后加一个数字

   把下拉框的数据全部读出，并存放在JS的Array中。

   当选择下拉框的时候触发onChange()事件动态的添加或改变级联

   下拉框的内容。

<html>  

<script language="javascript">

 var areaArray = new Array()

  areaArray[areaArray.length]=new Array("1","杭州")

  areaArray[areaArray.length]=new Array("2","湖州")

  areaArray[areaArray.length]=new Array("3","温州")

 var townArray = new Array()

  townArray[townArray.length]=new Array("1","1","上城区")

  townArray[townArray.length]=new Array("1","2","下城区")

  townArray[townArray.length]=new Array("2","3","南浔镇")

  townArray[townArray.length]=new Array("2","4","菱湖镇")

  townArray[townArray.length]=new Array("3","5","乐清")

  townArray[townArray.length]=new Array("3","6","苍南") 

 function setTown(obj1ID,obj2ID){

        var objArea = document.getElementById(obj1ID)

        var objTown = document.getElementById(obj2ID)

        var i

        var itemArray = null

        if(objArea.value.length > 0){

             itemArray = new Array()

             for(i=0i<townArray.lengthi++){

                if(townArray[i][0]==objArea.value){

                    itemArray[itemArray.length]=new 

Array(townArray[i][1],townArray[i][2])

                }

             }

        }

        for(i = objTown.options.length  i >= 0  i--){

                objTown.options[i] = null

        }

        objTown.options[0] = new Option("请选地区")

        objTown.options[0].value = ""

 

        if(itemArray != null){

                for(i = 0  i < itemArray.length i++){

                        objTown.options[i+1] = new 

Option(itemArray[i][1])

                        if(itemArray[i][0] != null){

                           objTown.options[i].value = itemArray[i][0]

                        }

                }

        }

   } 

 

</script>

  <body>

   <table width="99%" border="0" align="center" style="border-bottom:1px 

solid #cccccc">

      <tr>

       <td width="10"><select name="areaid" id="areaid" 

onChange="setTown('areaid','townid')">

          <option value="">请选市县</option>

          <option value="1">杭州</option>

    <option value="2">湖州</option>

    <option value="3">温州</option>

   </select>

       </td>

 <td  width="10"><select name="townid" id="townid">

    <option value="">请选地区</option>

   </select>

 </td>     

      </tr>    

   </table>

  </body>

</html>

document.im.src="easymsg1.0/easymsg1.0/images/face/"+document.myForm.sell.value + "gif"

这样就行了，不用那么麻烦

还有，你的img标签没有闭合，请注意下