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

JavaScript023

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

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

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

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

第一个下拉选项显示

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

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

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

 <Script>

   function cx(){

   //-一个国家、省、市的联动这么麻烦？参考下面代码

   //根据下拉框每次的改变。得到下级省、市。动态添加

   var selectA = document.getElementById('A')

   var selectB = document.getElementById('B')

    var acc=new Array()

    acc['请选择']=['请选择']

 acc['四川']=['汶川','眉山']//所有省对应的市

 acc['武汉']=['襄阳','宜昌','随州']

       

     selectB.options.length=0

          

  for(var i=0i<acc[selectA.value].lengthi++){

  

   

    selectB.options.add(new Option(acc[selectA.value][i],acc[selectA.value][i]))

  }

     

   

   }

  </Script>

 </HEAD>

 <BODY>

<select onchange="cx()" id="A">

<option value="请选择">请选择</option>

<option value="四川">四川</option> 

<option value="武汉">武汉</option>

</select>

<select  id="B"> 

<option value="请选择">请选择</option>

</select>

  

  

 </BODY>

</HTML>

$('.prayer-select').val()是取值的文本的话用text()

var value = $('.prayer-textarea').val() + $('.prayer-select').val()

$('.prayer-textarea').val(value)