协助用另一个 <SELECT> 填充第二个 <SELECT>答案

【问题标题】：Assistance with populating second <SELECT> with another <SELECT>协助用另一个 <SELECT> 填充第二个 <SELECT>
【发布时间】：2013-07-23 12:04:11
【问题描述】：

我有两个 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();

【问题讨论】：

两个 cmets：首先我会使用 jQuery 来处理 AJAX 和 DOM 操作（即api.jquery.com/jQuery.get），这更适合跨浏览器问题。其次不是很清楚你想要获得什么，也许你也可以发布你的标记以及 PHP 代码。
// code for IE6, IE5 >_
尝试先不使用 AJAX，然后重新加载页面。这将是很好的经验和对事物的理解。
我的第一个选择是通过 mysql 查询填充的。我不确定如何使用 ajax 或 js 猜想中的第一个值来使用另一个 mysql 查询中第一个选择的值填充第二个选择。
如果数据量允许，我建议不要使用 AJAX，因为重复的 AJAX 调用会导致不必要的服务器负载。只需查询您的数据库一次，并将所有必要的数据作为 json 存储在 javascript 中，过滤它，并根据需要填充您的选择。这是我为类似问题所做的一种方法：stackoverflow.com/a/43730295/2943403

标签： php javascript ajax select

【解决方案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
}

【讨论】：

只需将我的代码从split('#') 修改为split('@')。它现在应该可以工作了。

【解决方案2】：

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

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

它使用一个名为 SimpleAjax 的库。

【讨论】：

【解决方案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 ;)
}

【讨论】：