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

2023-09-11 01:13:34 作者:/

我自动填充第二个文本框基于第一个文本框的auto.jsp,同样地,我想自动填充一个组合框,我该怎么办呢?这是基于一个组合框中选择自动填充第二个组合框。 ------ auto.jsp -------

I am autofilling second textbox based on first textbox in auto.jsp, similarly i want to autofill a combobox, how can i do it? that is autofill second combo box based on first combo box selection. ------auto.jsp-------

<script language="javascript" type="text/javascript">  
    var xmlHttp  
    var xmlHttp
    function showState(str){ 
        if (typeof XMLHttpRequest != "undefined"){
            xmlHttp= new XMLHttpRequest();
        }
        else if (window.ActiveXObject){
            xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xmlHttp==null){
            alert ("Browser does not support XMLHTTP Request")
            return
        } 
        var url="state.jsp";
        url += "?count=" +document.getElementById("textbox1").value;//passing first textbox value and displaying in textbox2 ID
        xmlHttp.onreadystatechange = stateChange;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
    function stateChange(){   
        if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
            document.getElementById("textbox2").value = xmlHttp.responseText;    
        }   
    }   
</script>  
 <body>  
 <input id="textbox1" type="text" name="name" onkeyup="showState(this.value)"/> 
<input id="textbox2" type="text" name="secondVal" />// here i am displaying first textbox value
</body> 

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

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

<%
String firsttextbox=request.getParameter("count");//Got first textbox value
out.println(firsttextbox);// setting it in second text box value by document.getElementById("textbox2").value = xmlHttp.responseText; 
%>

同样的事情,我想要做下来时,从第一个组合框中选择一个下降,那么事件将被解雇通过启用第二个组合框auto.jsp到state.jsp那里,我怎么能实现呢?

感谢

推荐答案

您可以简化您现有的codeA的很多的,如果你使用jQuery - 我假设你从标签的方式做你题。下面将取代所有$ C $的c您呈现,再加上你就不需要在你的HTML内联的onkeyup

You can simplify your existing code a lot if you use jQuery - which I assume you do from the way you tagged your question. The following would replace all of the code you showed, plus you wouldn't need the inline onkeyup in your html:

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

如果 $。获得() 是jQuery的简单的Ajax方法之一。它通过从第二个参数的数据到URL中的第一个参数,而当响应返回它调用的第三个参数的功能(这是一种相当于你的 stateChange()除了jQuery函数测试状态你,只有调用函数时准备好)。

Where $.get() is one of jQuery's simple Ajax methods. It passes the data from the second parameter to the url in the first parameter, and when a response comes back it calls the function in the third parameter (which is kind of equivalent to your stateChange() function except jQuery tests the state for you and only calls the function when ready).

(顺便说一句,我就不会在每次KEYUP推荐一个新的Ajax请求,也许这样做的模糊,或至少使用超时机制,只能做一个事件,当用户停止打字,比如说,400毫秒。)

(By the way, I wouldn't recommend a new Ajax request on every keyup. Maybe do it on blur, or at least use a timeout mechanism to only do an event when the user has stopped typing for, say, 400ms.)

当你说的基础上一个组合框中选择自动填充第二个组合框你的意思设置取决于第一个组合选择的值可用选项的列表?假设你做,你可以使用类似于上述的技术:

When you say "autofill second combo box based on first combo box selection" do you mean set the list of available options depending on the value selected in the first combo? Assuming you do you can use a technique similar to the above:

$("#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">

其中,combo.jsp将处理combo1Val请求参数和返回相应的数据。如果您使用 .replaceWith()方法那就需要返回的HTML填充的组合是这样的:

Where 'combo.jsp' would process the 'combo1Val' request parameter and return the appropriate data. If you use the .replaceWith() method it would need to return the HTML for the filled combo something like this:

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

由于整个现有组合将被替换为新的。当然还有很多其他的方法,比如,只返回的选项,或返回JSON,并使用它来创建选项逐个。

Because the entire existing combo would be replaced with the new one. Of course there are lots of other approaches, e.g., returning just the options, or returning JSON and using it to create the options one by one.