js多个下拉框同时更新，比如我选中一个下拉框的值显示为1，页面上其他的下拉框自动更新为1

JavaScript014

js多个下拉框同时更新，比如我选中一个下拉框的值显示为1，页面上其他的下拉框自动更新为1,第1张

<select class="myDemo">

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

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

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

</select>

<select class="myDemo">

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

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

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

</select>

<!-- 必须确保option的value值跟文本值一样 -->

$('.myDemo').bind('change',function(){

    $('.myDemo').val($(this).val())

})

   把下拉框的数据全部读出，并存放在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>

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

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

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

第一个下拉选项显示

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

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

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