0

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

作为旁注，我可以通过将值发送到不同的页面并导致第二个页面<SELECT>弹出来使用 AJAX 完成此操作，但问题是我不希望在选择选项后弹出它，我只是希望它填充。也许我可以改变我的 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();
 }

你好社区，

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

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

document.your_form_name.your_select_id_name.onchange();

4

3 回答 3

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
}
于 2013-07-23T12:19:33.253 回答
0

该过程可能如下所示：在您的脚本中编码您通过json-encode()selectBusiness.inc.php函数发送到浏览器的值，例如 

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 ;)
}
于 2013-07-23T13:52:49.977 回答
0

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

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

它使用一个名为SimpleAjax的库。

于 2013-07-23T12:35:54.387 回答