javascript - 使用 jquery/ajax 动态填充下拉列表

Question

我正在尝试根据第一个列表的选定值动态填充下拉列表。

注意:两个下拉列表都是多选下拉列表:

这是我的下拉菜单的代码:

<select id="dis" name="dis[]" onChange="AjaxFunction();" class="form-control selectpicker show-menu-arrow" multiple  title="Select a City or Division">
  // my discrictes goes here  
</select>

<select id="zone" name="zone[]" class="form-control  show-menu-arrow" multiple  title="Choose Educational Zone" ></select>

为此，我找到了 AjaxFunction() javascript 函数。其如下:

function AjaxFunction(){
  var httpxml;
  try {
    // Firefox, Opera 8.0+, Safari
    httpxml=new XMLHttpRequest();
  } catch (e) {
    // Internet Explorer
    try {
      httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        httpxml=new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }

  function stateck() {
    if(httpxml.readyState==4) {
      var myarray = JSON.parse(httpxml.responseText);
      // Before adding new we must remove previously loaded elements
      for(j=document.getElementById('s2').length-1;j>=0;j--) {
        document.getElementById('s2').remove(j);
      }

      for (i=0;i<myarray.data.length;i++) {
        var optn = document.createElement("OPTION");
        optn.text = myarray.data[i].name_si;
        optn.value = myarray.data[i].zone_id;  
        document.getElementById('s2').options.add(optn);
      } 
    }
  }

  var str='';
  var s1ar=document.getElementById('s1');
  for (i=0;i< s1ar.length;i++) { 
    if(s1ar[i].selected) {
      str += s1ar[i].value + ','; 
    }
  } 
  //alert (s1ar);

  var str=str.slice(0,str.length -1); // remove the last coma from string
  //alert(str);

  //alert(str);
  var url="../includes/dropdown-zones.php";

  url=url+"?dis_id="+str;
  url=url+"&sid="+Math.random();
  //alert(url);
  httpxml.onreadystatechange=stateck;
  httpxml.open("GET",url,true);
  //httpxml.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  httpxml.setHeader('Content-type', 'application/json');

  httpxml.send(null);
}

我的问题是，现在我需要将上述函数转换为 jquery，因为我正在为此寻找 jQuery/Ajax 解决方案:

这是我使用 jQuery 尝试的方法:

$('#dis').on('change',function() {
  var str='';
  var s1ar=document.getElementById('dis');
  for (i=0;i< s1ar.length;i++) { 
    if(s1ar[i].selected) {
      str += s1ar[i].value + ','; 
    }
  } 

  var str=str.slice(0,str.length -1);
  var url="../includes/dropdown-zones.php";
      url=url+"?dis_id="+str;
      url=url+"&sid="+Math.random();

  $.ajax({
    type: "GET",
    url: url, 
    contentType: "application/json; charset-utf-8",
    dataType: "json",
    success: function(data) {
      $('#zone').empty();
      $('#zone').append("<option value=''>- Select Zone-</option>");
      $.each(data, function(i,item){
        var selecting; 
        if (selected === data[i].id) {
          selecting = ' selected="selected"'; 
        } else {
          selecting = '';
        }
        $('#zone').append('<option '+selecting+' value="'+data[i].id+'">'+data[i].name+'</optoin>');
      });
    }, 
    complete: function() {}
  }); 
});

但不适合我。有人能帮我解决这个问题吗？

谢谢

Answer 1

代码很好，我收到“selected”未定义的错误

您可以在此处看到if(selected === data[i].id)“selected”变量未分配给第一个下拉列表中选定的值。

您还需要从第一个下拉列表中删除 onChange="AjaxFunction();" 因为现在您正在使用 jQuery

检查下面的代码:

$(document).ready(function(){

	$('#dis').on('change',function() {
		
	  var str='';
	  var s1ar=document.getElementById('dis');
	  for (i=0;i< s1ar.length;i++) { 
		if(s1ar[i].selected) {
		  str += s1ar[i].value + ','; 
		}
	  }
	  
	  var str=str.slice(0,str.length -1);
	  var url="dropdown-zones.php";
		  url=url+"?dis_id="+str;
		  url=url+"&sid="+Math.random();

	  $.ajax({
		type: "GET",
		url: url, 
		contentType: "application/json; charset-utf-8",
		dataType: "json",
		success: function(data) {
		  $('#zone').empty();
		  $('#zone').append("<option value=''>- Select Zone-</option>");
		  $.each(data, function(i,item){
			var selecting=''; 
			if ($('#dis').val().findIndex(x => x==data[i].id)>=0) {
			  selecting = ' selected="selected"'; 
			} else {
			  selecting = '';
			}
			$('#zone').append('<option '+selecting+' value="'+data[i].id+'">'+data[i].name+'</optoin>');
		  });
		}, 
		complete: function() {}
	  }); 
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="dis" class="form-control selectpicker show-menu-arrow" multiple  title="Select a City or Division">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

<select id="zone" class="form-control  show-menu-arrow" multiple  title="Choose Educational Zone" ></select>

结果是这样的:

jSon 文件值为:

[{
        "id": 1,
        "name": "New"
    },
    {
        "id": 2,
        "name": "Open"
    },
    {
        "id": 3,
        "name": "Close"
    }
]