Jquery implementation of the provinces and cities select drop down box to replace the of sample code

2020-03-30 02:07:35
OfStack

Corresponding realization of provinces and cities: < Some are not packaged.

A more selective province determines the city's content

The JSP code:


<body>
   provinces <select name="prin">
   <option>-- Please select a --</option>
   <option> fujian </option>
   <option> Beijing </option>
   <option> shandong </option>
   <option> Shanghai </option>
    </select>
    County, city <select  id="sel2">
   <option>-- Please select a --</option>
      </select>  
</body>

Js code:


function appendShi(shi) {//String concatenation, concatenate the city
   var fjs='';
 for(var i=0;i<shi.length;i++)
 {
  fjs += '<option>' + shi[i]+ '</option>';
 }
 return fjs;
}
$(function() {
 var prince = [' fujian ',' Beijing ',' shandong ',' Shanghai '];
 var fjs = [' xiamen ',' quanzhou ',' fuzhou '];
 var bjs = [' Beijing ',' Chaoyang district ',' Haidian district, ',' Pinggu district '];
 var shs = [' Huangpu district ',' Changning district ',' Baoshan district ',' Jiading district, '];
 var sds = [' jinan ',' Qingdao ',' yantai ',' rizhao ',' laiwu ','sss'];

 $("select[name='prin']").change(function() {  
  var shi = $("#sel2");//I get a second select
  var prin = $("select[name='prin'][select option:selected]");//Gets the value of the selected identity
  var newShiSel = $('<select id="sel2"><option>-- Please select a --</option></select>');//
  if (prin.val() == ' fujian '){
   newShiSel.append(appendShi(fjs));   
  }
  if (prin.val() == ' Beijing ') {   
   newShiSel.append(appendShi(bjs));   
  }
  if (prin.val() == ' Shanghai ') {   
   newShiSel.append(appendShi(shs));   
  }
  if (prin.val() == ' shandong ') {   
   newShiSel.append(appendShi(sds));   
  }
  shi.replaceWith(newShiSel);
 });
});