Question

我有一个包含所有美国参议员的xml文档，包括他们的姓名，电子邮件，地址等。我已设法将数据从xml文档中提取到下拉菜单中。我想通过选择一个州来做到这一点，显示另一个下拉菜单，显示来自该州的所有参议员。在我的HTML代码中，我有一个下拉菜单，其中列出了所有50个州。我会使用我相信这将使用if语句完成，但我不确定如何将表单中的值设置为我正在使用的xml数据的值。

帮助赞赏！

以下是XML的示例：

<?xml version="1.0" encoding="UTF-8"?><contact_information><member>
    <member_full>Alexander (R-TN)</member_full>
    <last_name>Alexander</last_name>
    <first_name>Lamar</first_name>
    <party>R</party>
    <state>TN</state>
    <address>455 Dirksen Senate Office Building Washington DC 20510</address>
    <phone>(202) 224-4944</phone>
    <email>http://www.alexander.senate.gov/public/index.cfm?p=Email</email>
    <website>http://www.alexander.senate.gov/</website>
    <class>Class II</class>
    <bioguide_id>A000360</bioguide_id>
</member><member>
    <member_full>Ayotte (R-NH)</member_full>
    <last_name>Ayotte</last_name>
    <first_name>Kelly</first_name>
    <party>R</party>
    <state>NH</state>
    <address>144 Russell Senate Office Building Washington DC 20510</address>
    <phone>(202) 224-3324</phone>
    <email>http://www.ayotte.senate.gov/?p=contact</email>
    <website>http://www.ayotte.senate.gov</website>
    <class>Class III</class>
    <bioguide_id>A000368</bioguide_id>

到目前为止，这是我的javascript：

$(document).ready(function(){
$.ajax({
    type: "GET",
    url: "senators_cfm.xml",
    dataType: "xml",
    success: function(xml) {
        var select2 = $('#StateSelect');
        select2.append('<option value="Select a state">Select a State</option>');
        $(xml).find('member').each(function(){
            var states = $(this).find('state').text();
            select2.append("<option>"+states+"</option>");

        });
        var select1 = $('#SenatorSelect');
        select1.append('<option value="Select a senator">Select a Senator</option>');
        $(xml).find('member').each(function(){
            var fname = $(this).find('first_name').text();
            var lname = $(this).find('last_name').text();
            select1.append("<option>"+fname+"&nbsp"+lname+"</option>");
        });

Answer 1

请检查代码：

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    var xml = '<?xml version="1.0" encoding="UTF-8"?><contact_information><member>\
        <member_full>Alexander (R-TN)</member_full>\
        <last_name>Alexander</last_name>\
        <first_name>Lamar</first_name>\
        <party>R</party>\
        <state>TN</state>\
        <address>455 Dirksen Senate Office Building Washington DC 20510</address>\
        <phone>(202) 224-4944</phone>\
        <email>http://www.alexander.senate.gov/public/index.cfm?p=Email</email>\
        <website>http://www.alexander.senate.gov/</website>\
        <class>Class II</class>\
        <bioguide_id>A000360</bioguide_id>\
    </member><member>\
        <member_full>Ayotte (R-NH)</member_full>\
        <last_name>Ayotte</last_name>\
        <first_name>Kelly</first_name>\
        <party>R</party>\
        <state>NH</state>\
        <address>144 Russell Senate Office Building Washington DC 20510</address>\
        <phone>(202) 224-3324</phone>\
        <email>http://www.ayotte.senate.gov/?p=contact</email>\
        <website>http://www.ayotte.senate.gov</website>\
        <class>Class III</class>\
        <bioguide_id>A000368</bioguide_id></member>';
    $(document).ready(function () {
        var select2 = $('#StateSelect');
        select2.append('<option value="Select a state">Select a State</option>');
        $(xml).find('member').each(function () {
            var states = $(this).find('state').text();
            select2.append('<option value="' + states + '">' + states + '</option>');

        });
        var select1 = $('#SenatorSelect');
        select1.append('<option value="Select a senator">Select a Senator</option>');

        $("#StateSelect").change(function () {
            var state = $(this).val();
            var select1 = $('#SenatorSelect');
            select1.html('<option value="Select a senator">Select a Senator</option>');
            $(xml).find('member').each(function () {
                if (state == $(this).find('state').text()) {
                    var fname = $(this).find('first_name').text();
                    var lname = $(this).find('last_name').text();
                    select1.append("<option>" + fname + "&nbsp" + lname + "</option>");
                }
            });
        });
    });
</script>
</head>
<body>
    <select id="StateSelect"></select><br />
    <select id="SenatorSelect"></select>
</body>

注意：

我在一个变量中默认使用了xml字符串。
替换jquery文件的路径。

将表单数据与XML数据合并

1 个答案: