如何使用ajax动态加载选择选项值

Question

I am new to ajax. 我是ajax的新手。 On check click of checkbox I want my select combo box field to load dynamically by ajax. 选中复选框后，我希望我的选择组合框字段由ajax动态加载。 what I want is when I click on check box ajax should fetch data from two.jsp file and populate that data in my select box in one.jsp 我想要的是当我单击复选框ajax时应从two.jsp文件中获取数据并在one.jsp选择框中填充该数据

one.jsp 一个.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
function go_here(){
    if(document.getElementById('c1').checked){
        var xRequest1;

        //if(string1=="")
        //{
        //document.getElementById("Offer_id").innerHTML="";
        //return;
        }
        if(window.XMLHttpRequest)
        {
        xRequest1=new XMLHttpRequest();
        }
        else
        {
        xRequest1=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xRequest1.onreadystatechange=function ()
        {
        if((xRequest1.readyState==4) && (xRequest1.status==200))
        {
        document.getElementById("s1").innerHTML=xRequest1.responseText;
        }
        }

        xRequest1.open("get","two.jsp","true");

        xRequest1.send();    


    }
    else{

    }
}
</script>
</head>
<body>
<input type="checkbox" id="c1" onclick="go_here();"><br>
<select  name="Offer_id"  id='s1'  >

</select>
</body>
</html>

two.jsp two.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <option value="5234">abc1</option>
    <option value="5235">abc2</option>
    <option value="4947">abc2</option>
    <option value="5210">abc2</option>
    <option value="5208">abc2</option>
    <option value="5209">abc2</option>
    <option value="3974">abc100</option>
</body>
</html>

but I am not able to populate my select box's option fields. 但是我无法填充选择框的选项字段。 can some one guide me where am I wrong.. 有人可以指导我我在哪里错了..

Answer 1

Since you are trying to set the selects innerHTML to the responseText, you are trying to 'paste' the entire text describing the page two.jsp inside the select. 由于您试图将selects innerHTML设置为responseText，因此您试图“粘贴”描述select内描述two.jsp页面的整个文本。

Apart from strongly disagreeing that you use a html document to transmit the option data instead of xml or json, you'll have either: 除了强烈不同意您使用html文档传输选项数据而不是xml或json之外，您还可以选择以下两种方式：

1) Parse the two.jsp page into a live html document and the use a selector to set the innerHTML of your select to the innerHTML of the body from the two.jsp document. 1）将two.jsp页面解析为一个实时html文档，并使用选择器将您选择的innerHTML设置为two.jsp文档中主体的innerHTML。

OR 要么

2) cut the string from the responseText into pieces so that you only have the options left and use that string to set your selects innerhtml. 2）将responseText中的字符串切成小段，以便只剩下选项，然后使用该字符串设置选择的innerhtml。

Answer 2

That's not the right way to do it. 那不是正确的方法。 You need to change your two.jsp to return data (either XML or JSON) rather than an HTML page. 您需要更改two.jsp以返回数据（XML或JSON）而不是HTML页面。 Then your AJAX will fetch the data and loop through it to create & add the options to your control. 然后，您的AJAX将获取数据并遍历数据以创建选项并将其添加到控件中。

Alternatively, if you really want your two.jsp to be generating the HTML options for the control (although some people will consider this to be a bad design), you can create a function in the two.jsp to only return the required HTML. 另外，如果您确实希望two.jsp为控件生成HTML选项（尽管有些人会认为这是一个糟糕的设计），则可以在two.jsp中创建一个函数以仅返回所需的HTML。 AJAX will fetch the HTML by calling that function and then will assign the HTML to the control's innerHTML property. AJAX将通过调用该函数来获取HTML，然后将HTML分配给控件的innerHTML属性。

A quick fix can be by changing two.jsp to this: 可以通过将two.jsp更改为此：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<option value="5234">abc1</option>
<option value="5235">abc2</option>
<option value="4947">abc2</option>
<option value="5210">abc2</option>
<option value="5208">abc2</option>
<option value="5209">abc2</option>
<option value="3974">abc100</option>

如何使用ajax动态加载选择选项值

问题描述

2 个解决方案

解决方案1
0 2015-09-17 13:50:45

解决方案2
0 2015-09-17 13:51:01

如何使用ajax动态加载选择选项值

问题描述

2 个解决方案

解决方案1 0 2015-09-17 13:50:45

解决方案2 0 2015-09-17 13:51:01

解决方案1
0 2015-09-17 13:50:45

解决方案2
0 2015-09-17 13:51:01