jquery实现省市select下拉框的替换(示例代码)

前端技术 2023/09/09 JavaScript

省市对应的实现：<还有一些没封装起来>

更具选择的省份来确定市的内容

jsp代码：

复制代码 代码如下:

<body>
  省份<select name=\"prin\">
   <option>--请选择--</option>
   <option>福建</option>
   <option>北京</option>
   <option>山东</option>
   <option>上海</option>
    </select>
   县、市<select  id=\"sel2\">
   <option>--请选择--</option>
      </select>  
</body>

js代码：
复制代码 代码如下:

function appendShi(shi) {//字符串拼接，拼接市区
   var fjs=\'\';
 for(var i=0;i<shi.length;i++)
 {
  fjs += \'<option>\' + shi[i]+ \'</option>\';
 }
 return fjs;
}
$(function() {
 var prince = [\'福建\',\'北京\',\'山东\',\'上海\'];
 var fjs = [\'厦门\',\'泉州\',\'福州\'];
 var bjs = [\'北京\',\'朝阳区\',\'海淀区\',\'平谷区\'];
 var shs = [\'黄浦区\',\'长宁区\',\'宝山区\',\'嘉定区\'];
 var sds = [\'济南\',\'青岛\',\'烟台\',\'日照\',\'莱芜\',\'sss\'];

 $(\"select[name=\'prin\']\").change(function() {  
  var shi = $(\"#sel2\");//得到第二个select
  var prin = $(\"select[name=\'prin\'][select option:selected]\");//得到选中的身份的值
  var newShiSel = $(\'<select id=\"sel2\"><option>--请选择--</option></select>\');//
  if (prin.val() == \'福建\'){
   newShiSel.append(appendShi(fjs));   
  }
  if (prin.val() == \'北京\') {   
   newShiSel.append(appendShi(bjs));   
  }
  if (prin.val() == \'上海\') {   
   newShiSel.append(appendShi(shs));   
  }
  if (prin.val() == \'山东\') {   
   newShiSel.append(appendShi(sds));   
  }
  shi.replaceWith(newShiSel);
 });
});

本文地址：https://www.stayed.cn/item/24716

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案