Wie kann man AJAX verwenden, um die Länderliste in Abhängigkeit von der Länderliste aufzufüllen?

Question

Ich habe den Code unten, dass ein Zustand Dropdown-Liste ändern, wenn Sie die Länderliste ändern.
Wie kann ich erreichen, dass die Liste der Bundesländer NUR dann geändert wird, wenn die Länder-ID-Nummern 234 und 224 ausgewählt sind?
Wenn ein anderes Land ausgewählt wird, sollte es in dieses Texteingabefeld übertragen werden

<input type="text" name="othstate" value="" class="textBox">

Das Formular

<form method="post" name="form1">
<select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
<option>Select Country</option>
<option value="223">USA</option>
<option value="224">Canada</option>
<option value="225">England</option>
<option value="226">Ireland</option>
</select>

<select style="background-color: #ffffa0" name="state">
<option>Select Country First</option>
</select>

Das Javascript

<script>
function getState(countryId)
{
   var strURL="findState.php?country="+countryId;
   var req = getXMLHTTP();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
     // only if "OK"
     if (req.status == 200)
         {
        document.getElementById('statediv').innerHTML=req.responseText;
     } else {
       alert("There was a problem while using XMLHTTP:\n" + req.statusText);
     }
       }
      }
   req.open("GET", strURL, true);
   req.send(null);
   }
}
</script>

Answer 1

Überprüfen Sie einfach den countryId-Wert, bevor Sie die AJAX-Anfrage stellen, und führen Sie die Anfrage nur aus, wenn die countryId im zulässigen Bereich liegt. Wenn die countryId nicht übereinstimmt, würde ich die Auswahl ausblenden (und wahrscheinlich auch ihren Wert löschen) und eine bereits vorhandene Eingabe anzeigen, die zuvor ausgeblendet war. Die umgekehrte Vorgehensweise sollte erfolgen, wenn ein zulässiges Land ausgewählt wird.

jQuery-Beispiel unten:

<form method="post" name="form1">
   <select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
      <option>Select Country</option>
      <option value="223">USA</option>
      <option value="224">Canada</option>
      <option value="225">England</option>
      <option value="226">Ireland</option>
   </select>

   <select style="background-color: #ffffa0" name="state">
      <option>Select Country First</option>
   </select>

   <input type="text" name="othstate" value="" class="textBox" style="display: none;">
</form>

$(function() {
    $('#country').change( function() {
        var val = $(this).val();
        if (val == 223 || val == 224) {
            $('#othstate').val('').hide();
            $.ajax({
               url: 'findState.php',
               dataType: 'html',
               data: { country : val },
               success: function(data) {
                   $('#state').html( data );
               }
            });
        }
        else {
           $('#state').val('').hide();
           $('#othstate').show();
        }
    });
});

Answer 2

Ich denke, dass es am einfachsten ist, ein Dropdown-Menü für den Status und ein Texteingabefeld mit verschiedenen IDs zu erstellen. Setzen Sie die Anzeige von beiden auf keine und dann müssen Sie nur noch den Inhalt von getState() mit

if (countryId == 233 || countryId == 234) {
   /* Ajax state population here */

   dropdownId.display = 'block';
   textEntryId.display = 'none';
}
else  {
   textEntryId.display = 'block';
   dropdownId.display = 'none';
}

(wobei dropdownId y textEntryId sind die IDs der entsprechenden UI-Komponenten), so dass Sie die Anzeige für das Status-Dropdown oder den Texteintrag bei Auswahl aktivieren/anzeigen.

JQuery ist ja schön und gut, aber ich würde es nicht einführen nur um dieses Problem zu lösen.

Answer 3

EDIT: hier ist eine Lösung, die ganz gut für die Aufgabe, die Anpassung der Linien von Tvanfosson funktioniert:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script>
$(function() {
  $('#country').change( function() {
    var val = $(this).val();
    if (val == 223 || val == 224) {
        $('#othstate').val('').hide();
        $.ajax({
           url: 'findState.php',
           dataType: 'html',
           data: { country : val },
           success: function(data) {
               $('#state').html( data );
           }
        });
    }
    else {
       $('#state').val('').hide();
       $('#othstate').show();
    }
  });
});
</script>

<select style="background-color: #ffffa0" name="country" id=country >
  <option>Select Country</option>
  <option value="223">USA</option>
  <option value="224">Canada</option>
  <option value="225">England</option>
  <option value="226">Ireland</option>
</select>

<select style="background-color: #ffffa0" name="state">
  <option>Select Country First</option>
</select>

<input type="text" name="othstate" id=othstate value="" class="textBox" style="display: none;">

Wie Sie sehen können, habe ich die <form> Element, das nicht unbedingt notwendig ist, aber hinzugefügt werden kann (und dann richtig verwendet werden muss, falls JS auf der Benutzerseite deaktiviert wird. Siehe aquí .

Ich habe auch die onchange Ereignis, das durch die Jquery-Funktion 'change()` ersetzt wird.

Answer 4

**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "ajaxServer.jsp",
            data: { country : selectedCountry } 
        }).done(function(data){
            $("#response").html(data);
        });
    });
});
</script>
<style>
select { width: 10em }
</style>
</head>
<body>
<form>
    <table>
        <tr>
            <td> <label>Country:</label></td>
            <td>    <select class="country">
                    <option>Select</option>
                    <option value="usa">United States</option>
                    <option value="india">India</option>
                    <option value="uk">United Kingdom</option>
                </select>
            </td>
        </tr>
        <tr><td >
        <label>States:</label></td>
     <td>   <select id="response">
                    <option>Select State</option>

                </select>
        </td></tr>

    </table>
</form>
</body> 
</html>

**ajaxServer.jsp**
<option>Select State</option>
<% 
String count=request.getParameter("country");
String india[]={"Mumbai", "New Delhi", "Bangalore"};
String usa[]={"New Yourk", "Los Angeles","California"};
String uk[]={"London", "Manchester", "Liverpool"};
String states[];
if(count.equals("india"))
{
    for(int i=0;i<=2;i++)
    {
    out.print("<option>"+india[i]+"</option>");
    }
}
else if(count.equals("usa"))
{
    for(int i=0;i<usa.length;i++)
    {
    out.print("<option>"+usa[i]+"</option>");
    }
}
else if(count.equals("uk"))
{
    for(int i=0;i<=2;i++)
    {
    out.print("<option>"+uk[i]+"</option>");
    }
}

%>

Answer 5

VK API wählen Sie einfach Land, erhalten Sie es id und wählen Sie Stadt aus

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

var $j = jQuery.noConflict();
var _getCountry = function() {
    $j.ajax({
      url: "http://api.vk.com/method/database.getCountries",
      data: {
       'v': 5.5,
        'need_all': 0,
        'code' : 'RU,UA,BY,KZ,KG,LV,EE'  
       // 'count': 10
      },
      dataType: 'jsonp',
      success: function(data, status) {
        if (status !== 'success') {
          return false;
        }
        console.log(data.response, status); 

        $j.each(data.response.items, function(i, item) {
         console.log("each country");
         var newOption = '<option id="' + item.id + '" value="' + item.title + '">' + item.title + '</option>';
         country_options.push(newOption);
       });

       document.getElementById('countrylist').innerHTML = country_options;

      }

 });  
 }   

var _getCity = function(country_id) {

    $j.ajax({
      url: "http://api.vk.com/method/database.getCities",
      data: {
       'v': 5.61,
        'need_all': 0,
        'country_id': country_id
      },
      dataType: 'jsonp',
      success: function(data, status) {
        if (status !== 'success') {
          return false;
        }
        console.log(data.response, status); 

        $j.each(data.response.items, function(i, item) {
         console.log("each city");
         var newOption = '<option id="' + item.id + '" value="' + item.title + '">' + item.title + '</option>';
         city_options.push(newOption);
       });

       document.getElementById('citylist').innerHTML = city_options;

      }

 });  
 }  

var  city_options = [];
var  country_options = [];

 $j(document).ready(function () {  
    _getCountry(); 

  $j('#country').on('input',function() {
    var opt = $j('option[value="'+$j(this).val()+'"]');
    var countryid = opt.attr('id');  

    _getCity(countryid);  

  });

 });

</script>

 <div class="form-group">
          <label class="col-lg-4 control-label">:</label>
          <div class="col-lg-8">

              <div class="controls">
                <input name="country" list="countrylist" id="country" class="form-control" />
                <datalist id="countrylist">
                </datalist> 
              </div>

          </div>
        </div> 

        <div class="form-group">
          <label class="col-lg-4 control-label">:</label>
          <div class="col-lg-8">

            <input name="city" list="citylist" id="city" class="form-control"/>
                <datalist id="citylist">
            </datalist>  

          </div>
        </div>