单选表单、XML 文件解析和 Jquery答案

【问题标题】：Radio form, XML file parsing, and Jquery单选表单、XML 文件解析和 Jquery
【发布时间】：2015-07-01 23:41:21
【问题描述】：

我正在尝试根据我选择的单选按钮更改填充哪个下拉菜单。每个下拉菜单的数据位于不同的 XML 文件中。我正在尝试使用 if-else 语句来选择我使用的 xml 文件，但在使用 alert(saddress);后，我发现更改无线电表单甚至不使用 else 语句。你们有人知道为什么吗？

这是我的 JS `$(document).ready(function(){ $('input:radio[name="congresstype"]').change(function(){ if($('input[name="congresstype"]:checked','#usrform').val()==$('#SenatorCheck').val()){

$.ajax({
    type: "GET",
    url: "senators_cfm.xml",
    dataType: "xml",
    success: function(xml) {

        $('#StateSelect').change(function(){
            $('#SenatorSelect').empty();
            $('#HouseSelect').empty();
            var state = $(this).val();
            var select1 = $('#SenatorSelect');
            var SAD = $('#SenatorAddress');
            select1.append('<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>");
            var saddress = $(this).find('address').text();
             SAD.val(saddress);

        }




                });

        });
    }

});
}else if($('input[name="congresstype"]:checked','#usrform').val()==$('#HouseCheck').val()) {

$.ajax({
    type: "GET",
    url: "MemberData.xml",
    dataType: "xml",
    success: function(xml) {

        $('#StateSelect').change(function(){
            $('#SenatorSelect').empty();
            $('#HouseSelect').empty();
            select1.empty();
            var state = $(this).val();
            var select1 = $('#SenatorSelect');
            var HAD = $('#HouseSelect');
            HAD.append('<option value="Select a House Representative">Select a House Representative</option>');
        $(xml).find('member-info').each(function(){
            if(state == $(this).find('state postal-code').text()){
            var name = $(this).find('official-name').text();
            HAD.append(name);
            var saddress = $(this).find('address').text();
             HAD.val(saddress);
             alert(saddress);

        }




                });

        });
    }
});}

}); `

这是我的 html：<input type="radio" id="SenatorCheck" name="congresstype" value="Scheck" checked>Senator <br> <input type="radio" id="HouseCheck" name="congresstype" value="Hcheck">House Representative

最后，这里是 else 语句代码中的示例 xml：<members> <member> <statedistrict>AK00</statedistrict> <member-info> <namelist>Young, Don</namelist> <bioguideID>Y000033</bioguideID> <lastname>Young</lastname> <firstname>Don</firstname> <middlename/> <sort-name>YOUNG,DON</sort-name> <suffix/> <courtesy>Mr.</courtesy> <prior-congress>113</prior-congress> <official-name>Don Young</official-name> <formal-name>Mr. Young of Alaska</formal-name> <party>R</party> <caucus>R</caucus> <state postal-code="AK"> <state-fullname>Alaska</state-fullname> </state> <district>At Large</district> <townname>Fort Yukon</townname> <office-building>RHOB</office-building> <office-room>2314</office-room> <office-zip>20515</office-zip> <office-zip-suffix>0200</office-zip-suffix> <phone>(202) 225-5765</phone> <elected-date date="20141104">November 4, 2014</elected-date> <sworn-date date="20150112">January 12, 2015</sworn-date> </member-info> <committee-assignments> <committee comcode="II00" rank="2"/> <committee comcode="PW00" rank="2"/> <subcommittee subcomcode="II10" rank="2"/> <subcommittee subcomcode="II13" rank="2"/> <subcommittee subcomcode="II24" rank="1" leadership="Chairman"/> <subcommittee subcomcode="PW05" rank="2"/> <subcommittee subcomcode="PW07" rank="2"/> <subcommittee subcomcode="PW12" rank="2"/> </committee-assignments>

$(document).ready(function() {


$('.form').fadeIn(500);
});
});

$(document).ready(function() {
  $('#StartButton').click(function() {
    $('.Step1').removeClass("Step1");
    $('#class1').addClass("instructions");
    $('#class1').removeClass('body');
    $('#class1').removeClass('icon-menu');
  });
});

$(document).ready(function() {
  $('#Step1Button').click(function() {
    $('.Step2').removeClass("Step2");
  });
});

$(document).ready(function() {
  $('#Step2Button').click(function() {
    $('.Step3').removeClass("Step3");

  });
});





$(document).ready(function() {

$('input:radio[name="congresstype"]').change(function() {
  if ($('input[name="congresstype"]:checked', '#usrform').val() == $('#SenatorCheck').val()) {

    $.ajax({
      type: "GET",
      url: "senators_cfm.xml",
      dataType: "xml",
      success: function(xml) {

        $('#StateSelect').change(function() {
          $('#SenatorSelect').empty();
          $('#HouseSelect').empty();
          var state = $(this).val();
          var select1 = $('#SenatorSelect');
          var SAD = $('#SenatorAddress');
          select1.append('<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>");
              var saddress = $(this).find('address').text();
              SAD.val(saddress);


            }




          });

        });
      }

    });
  } else if ($('input[name="congresstype"]:checked', '#usrform').val() == $('#HouseCheck').val()) {

    $.ajax({
      type: "GET",
      url: "MemberData.xml",
      dataType: "xml",
      success: function(xml) {

        $('#StateSelect').change(function() {
          $('#SenatorSelect').empty();
          $('#HouseSelect').empty();
          select1.empty();
          var state = $(this).val();
          var select1 = $('#SenatorSelect');
          var HAD = $('#HouseSelect');
          HAD.append('<option value="Select a House Representative">Select a House Representative</option>');
          $(xml).find('member-info').each(function() {
            if (state == $(this).find('state postal-code').text()) {
              var name = $(this).find('official-name').text();
              HAD.append(name);
              var saddress = $(this).find('address').text();
              HAD.val(saddress);


            }




          });

        });
      }
    });
  }
});
});
});



$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="form.php" id="usrform" name="usrform" method="get" enctype="text/plain">
  Name:
  <br>
  <input type="text" name="SenderName" value="Name" onfocus="if (this.value=='Name') this.value='';" />
  <br>E-mail:
  <br>
  <input type="text" name="SenderEmail" value="Email Address" onfocus="if (this.value=='Email Address') this.value='';" />
  <br />Address:
  <br>
  <input type="text" name="SenderAddress" value="Home Address" onfocus="if (this.value=='Home Address') this.value='';" />
  <br />Title:
  <br>
  <input type="text" name="SenderTitle" value="Title" onfocus="if (this.value=='Title') this.value='';" />
  <br />City:
  <br>
  <input type="text" name="SenderCity" value="City" onfocus="if (this.value=='Title') this.value='';" />
  <br />Zipcode:
  <br>
  <input type="text" name="SenderZipcode" value="Zip" onfocus="if (this.value=='Title') this.value='';" />
  <br />Phonenumber:
  <br>
  <input type="text" name="SenderPhonenumber" value="Phonenumber" onfocus="if (this.value=='Title') this.value='';" />
  <br />

  <input type="radio" id="SenatorCheck" name="congress-type" value="Scheck" checked>Senator
  <br>
  <input type="radio" id="HouseCheck" name="congress-type" value="Hcheck">House Representative

  <br />

  <input type="hidden" id="SenatorAddress" name="SA" />
  <input type="hidden" id="HouseAddress" name="HA" />Select Your State
  <select id="StateSelect" name="senatorstates" form="usrform">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
  </select>
  <br/>Choose a Senator
  <select id="SenatorSelect" name="senatornames" form="usrform"></select>
  <br />
  <select id="HouseSelect" name="housenames" form="usrform"></select>
  <br />

【问题讨论】：

你必须为单选按钮的变化添加一个事件处理程序，没有它它不会自动拾取
就像，$('input:radio[name="postage"]').change(function(){ first if-statement...etc }
我的问题是为什么它不接。那台收音机的价值不是在改变吗？

标签： javascript jquery xml if-statement radio-button

【解决方案1】：

首先你应该确保你的单选按钮在一个组中具有相同的名称..

<input type="radio" id="SenatorSelect" name="namesGroup" form="usrform" value="Senators"></select>
<input type="radio" id="HouseSelect" name="namesGroup" form="usrform" value="Houses"></select>
<input onclick= id="StartButton" name="Start" type="button" value="Begin!" />

您必须使用 JQuery 为更改整个组的选项添加一个事件处理程序：

$("input[name='namesGroup']").change(function(e){
if($(this).val() == 'Senators') {
    Do Ajax Request and Populate DropDowns
} else {
    Do Other Ajax Post and Populate
   }
}

这是您的文档就绪事件处理程序..

$(document).ready(function(){
    Do Ajax Call at start of page
});

This Link has a good explanation

原因是浏览器无法知道何时检查哪个输入被检查，除非您告诉它何时检查该值。 jQuery .change() 函数告诉它每次更改单击的单选按钮时检查值

您的完整 Javascript 看起来类似于但不完全类似于：

$(document).ready(function() {

  $('.form').fadeIn(500);
  if ($('input[name="congresstype"]:checked', '#usrform').val() == $('#SenatorCheck').val()) 
{

$.ajax({
  type: "GET",
  url: "senators_cfm.xml",
  dataType: "xml",
  success: function(xml) {

    $('#StateSelect').change(function() {
      $('#SenatorSelect').empty();
      $('#HouseSelect').empty();
      var state = $(this).val();
      var select1 = $('#SenatorSelect');
      var SAD = $('#SenatorAddress');
      select1.append('<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>");
          var saddress = $(this).find('address').text();
          SAD.val(saddress);

        }

      });

    });
  }

});
} else if ($('input[name="congresstype"]:checked', '#usrform').val() == $('#HouseCheck').val()) {

$.ajax({
  type: "GET",
  url: "MemberData.xml",
  dataType: "xml",
  success: function(xml) {

    $('#StateSelect').change(function() {
      $('#SenatorSelect').empty();
      $('#HouseSelect').empty();
      select1.empty();
      var state = $(this).val();
      var select1 = $('#SenatorSelect');
      var HAD = $('#HouseSelect');
      HAD.append('<option value="Select a House Representative">Select a House Representative</option>');
      $(xml).find('member-info').each(function() {
        if (state == $(this).find('state postal-code').text()) {
          var name = $(this).find('official-name').text();
          HAD.append(name);
          var saddress = $(this).find('address').text();
          HAD.val(saddress);

        }

      });

    });
  }
});
  }
  });

  $("input[name='congress-type']").change(function(e) {

  if ($(this).val() == 'Scheck') {

    alert('HI');

  } else {
alert('Coding is cool');
  }
});

$('#StartButton').click(function() {


$('.Step1').removeClass("Step1");


$('#class1').addClass("instructions");

$('#class1').removeClass('body');

$('#class1').removeClass('icon-menu');

});

$('#Step1Button').click(function() {
  $('.Step2').removeClass("Step2");
});

$('#Step2Button').click(function() {
  $('.Step3').removeClass("Step3");
});

$(document).ready(main);

我只使用过 Document Ready 一次，一开始它会查找检查了哪个，并执行您告诉它的任何操作和方法。然后在准备好的文档之外我添加我的事件处理程序，浏览器仍然会选择它们

【讨论】：

这很有意义！抱歉，我给出了错误的 HTML。现已更新。
但是，在我添加处理程序后，两个下拉框都拒绝填充。在我添加之前，第一个是。
是的，您仍然需要您的文档准备功能，以便它知道在页面首次加载时该做什么......只有在您单击单选按钮时才会触发更改
抱歉文档准备功能从灰色框中被剪掉了，它仍然是正常格式。
你的 javascript 现在看起来如何