Javascript 基于另一个组合框选择自动填充组合框

我基于auto.jsp中的第一个文本框自动填充第二个文本框，类似地，我想自动填充一个组合框，我该怎么做？即根据第一个组合框选择自动填充第二个组合框。 ------auto.jsp-------

var xmlHttp
var xmlHttp
函数showState（str）{
if（XMLHttpRequest的类型！=“未定义”）{
xmlHttp=新的XMLHttpRequest（）；
}
else if（window.ActiveXObject）{
xmlHttp=新的ActiveXObject（“Microsoft.xmlHttp”）；
}
if（xmlHttp==null）{
警报（“浏览器不支持XMLHTTP请求”）
返回
} 
var url=“state.jsp”；
url+=“？count=“+document.getElementById（“textbox1”）.value；//传递第一个textbox值并显示在textbox2 ID中
xmlHttp.onreadystatechange=stateChange；
open（“GET”，url，true）；
xmlHttp.send（空）；
}
函数stateChange（）{
如果（xmlHttp.readyState==4 | | xmlHttp.readyState==“完成”）{
document.getElementById（“textbox2”）.value=xmlHttp.responseText；
}   
}   
//这里我显示第一个文本框值

--------state.jsp-----------

当从第一个组合框中选择下拉菜单时，我想做的同样的事情是，通过在auto.jsp中启用第二个组合框，将触发一个事件到state.jsp，我如何实现它？

---

谢谢

如果您使用jQuery，您可以大大简化您现有的代码—我假设您是通过标记问题的方式来实现这一点的。以下内容将替换您显示的所有代码，而且您不需要在html中使用内联

onkeyup

：

$(document).ready(function() {
   $("#textbox1").keyup(function() {
      $.get('state.jsp', {count : this.value}, function(responseData) {
         $("#textbox2").val(responseData);
      });
   });
});

其中是jQuery的一个简单Ajax方法。它将数据从第二个参数传递到第一个参数中的url，当响应返回时，它调用第三个参数中的函数（这相当于您的

stateChange（）

函数，除了jQuery为您测试状态，并且仅在准备就绪时调用函数）

（顺便说一句，我不建议在每次按键时都使用新的Ajax请求。可以在blur上执行，或者至少使用超时机制，仅在用户停止键入（例如400毫秒）时执行事件。）

当您说“基于第一个组合框选择自动填充第二个组合框”时，您的意思是根据第一个组合框中选择的值设置可用选项列表吗？假设您这样做，您可以使用与上述类似的技术：

$("#combo1,#combo2,#combo3").change(function() {
   var associatedCombo = $(this).attr('data-associated');
       requestData = {};
   requestData[this.id] = $(this).val();
   $.get('combo.jsp', requestData, function(responseData) {
      $("#" + associatedCombo).replaceWith(responseData);
   });
});

<select id="combo1" data-associated="combo4">

---

因为整个现有组合将替换为新组合。当然还有很多其他方法，例如，只返回选项，或者返回JSON并使用它逐个创建选项。

您是否正在执行Ajax请求，以便将一个文本框设置为与另一个文本框相同的值？或者这只是一个简化的示例，第二个文本框的值将来自基于第一个值的数据库查找？不，我没有执行ajax请求，这只是一个简化的示例，第二个文本框的值将来自基于第一个值的数据库查找。类似地，我希望根据另一个组合框选择填充组合框。我发现在所有浏览器中都不支持ajax。@nnnnnn我该怎么做？请建议一个答案您正在执行一个Ajax请求，这就是代码中所有

XMLHttpRequest

内容的意义所在。答案张贴…请看我的评论下面如果可能的话请给我提供一个解决方案NNNN亚它的工作…非常感谢nnnnnn，但是，当我选择第一个组合框时，在第二个组合框id中加载了combo.jsp，但是如何填充第二个组合框？同样，如果有两个或更多组合框，那么我必须为每个onchange事件创建单独的jsp页面？对不起，我不明白您在第二条评论中询问的是什么。如果它“起作用”，那么它不是在流行吗？至于为每个页面创建单独的jsp页面，如果您包含一个请求参数来告诉它您请求的是什么类型的信息，并让它只返回相应的内容，那么您可以使用一个jsp来完成所有操作。ok ok ok…通过请求参数，您可以编辑您的代码，以便我可以发送文本框id和组合框id，我试过了，但没能成功it@nnnnnn...please通过编辑代码帮助我，以便我可以将多个组合框值发送到一个jsp页面

$(document).ready(function() {
   $("#textbox1").keyup(function() {
      $.get('state.jsp', {count : this.value}, function(responseData) {
         $("#textbox2").val(responseData);
      });
   });
});

$("#combo1,#combo2,#combo3").change(function() {
   var associatedCombo = $(this).attr('data-associated');
       requestData = {};
   requestData[this.id] = $(this).val();
   $.get('combo.jsp', requestData, function(responseData) {
      $("#" + associatedCombo).replaceWith(responseData);
   });
});

<select id="combo1" data-associated="combo4">

<select id="combo2" name="combo2">
   <option value="1">One</option>
   ...
</select>