Question

我有两个SELECTS＆＃39。两者都通过mysql查询填充。在用户从第一个<SELECT>中进行选择后，需要填充第二个。任何人都可以就如何最好地实现这个目标提供一些指导吗？

作为旁注，我可以通过将值发送到不同的页面并导致第二个<SELECT>弹出来实现这一点，但问题是我不想要它选择一个选项后弹出，我只想填充它。也许我可以改变我的JS？

function showBus(selection_id)
{
    if (selection_id=="")
    {
        document.getElementById("Bus_Opt").innerHTML="";
        return;
    }    
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("Bus_Opt").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/includes/adminPages/selectBusiness.inc.php?selection_id="+selection_id,true);
xmlhttp.send();
 }

Hello Community，

感谢您的回复。一些快速清晰度，我基本上只是希望我的两个选择框同时出现，即使第一个选择的值是＆＃34;＆＃34;。为此，我添加了这个功能。

window.onload = function() {
document.Search.group.onchange()
};

document.your_form_name.your_select_id_name.onchange（）;

Answer 1

假设您希望第二次选择具有以下新选项：

<option value='1'>First Value</option>
<option value='2'>Second Value</option>

假设你的ajax的返回值是这样的：1@First Value|2@Second Value

通过

更改您的代码document.getElementById("Bus_Opt").innerHTML=xmlhttp.responseText;

var a = xmlhttp.responseText;
var options = a.split('|');
secondSelect = document.getElementById("id_of_second_select");
secondSelect.length = 0; // delete all options from second select
for (i=0; i < option.length; i++) {
    option = options[i].split('@');
    optionValue = option[0];
    optionText = option[1];
    secondSelect.options[secondSelect.options.length] = new Option(optionValue, optionText); // Add new option to second select
}

Answer 2

您是否尝试实现此处“多选”示例中显示的内容？：

http://simpleajax.googlecode.com/svn/docs/demos/simple_demos.html

它使用名为SimpleAjax的库。

Answer 3

此过程如下所示：在selectBusiness.inc.php脚本中，通过json-encode()功能对您发送给浏览器的值进行编码，例如：

if (isset($_GET['selection_id'])) {
  // here read the values from your database according to $_GET['selection_id'] and put them to array
  $arr = array('option1' => 'value1', 'option2' => 'value2', 'option3' => 'value3');
  $str = json_encode($arr); // convert the array to string
  echo $str; // {"option1":"value1","option2":"value2","option3":"value3"}
  exit;
}

现在在javascript中替换

document.getElementById("Bus_Opt").innerHTML=xmlhttp.responseText;

使用以下代码 - 它使用JSON.parse()函数：

var obj = JSON.parse(xmlhttp.responseText); // convert the string back to object
console.log(obj); // 
var select2 = document.getElementById("select2");
select2.length = 0;
for (var prop in obj) {
    select2.options[select2.options.length] = new Option(prop, obj[prop]); // thanks to Erdo ;)
}

协助用第二个<select>填充另一个</select>

3 个答案: