Как использовать AJAX для заполнения списка состояний в зависимости от списка стран?

Question

У меня есть код ниже, который изменит раскрывающийся список состояния при изменении списка стран.
Как я могу заставить его изменить список состояний ТОЛЬКО, когда выбраны идентификаторы страны 234 и 224?
Если выбрана другая страна, она должна быть изменения в этот текст ввода

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

форме

<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> 

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

Просто проверьте значение CountryId прежде чем вы выполните запрос AJAX и выполните только команду req uest, если countryId находится в допустимом диапазоне. В случае, когда countryId не соответствует, я бы спрятал select (возможно, также очистил его значение) и покажу уже существующий вход, который ранее был скрыт. Реверс должен быть сделан, если выбрана допустимая страна.

JQuery пример ниже:

<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

Я думаю, что простая вещь, чтобы сделать, это обеспечить раскрытое состояние и поле ввода текста с различными идентификаторами. Установите дисплей как в ни и тогда вам просто необходимо окружить ваше содержание GetState() с

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

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

(где dropdownId и textEntryId являются идентификаторы соответствующих компонентов пользовательского интерфейса), чтобы включить/отобразить отображение для раскрывающегося списка состояния или текстового ввода при выборе.

JQuery все хорошо и хорошо, но я бы не представил его только для решения этой проблемы.

Answer 3

EDIT: здесь это решение, которое работает достаточно хорошо для выполнения этой задачи, адаптируя линию Tvanfosson:

<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;"> 

Как вы можете видеть, я устранил <form> элемент, который не является абсолютно необходимым, но может быть добавлен (и затем должен быть использован должным образом в случае JS деактивируется на конечных пользователей. См here.

Я также устранил onchange событие, которое заменяется на «изменение()` функцию JQuery.

Answer 4

VK API только выбрать страну, получить его идентификатор и выберите город из

<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"> 
 
      \t <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>

Answer 5

////////////////// connection file con.php rishabh 
<?php 
ini_set('display_errors', 1); 
ini_set('display_startup_errors', 1); 
error_reporting(E_ALL); 
     $dbhost = 'localhost'; 
     $dbuser = 'root'; 
     $dbpass = ''; 
     $conn = mysql_connect($dbhost, $dbuser, $dbpass); 
     if(! $conn) { 
      die('Could not connect: ' . mysql_error()); 
     } 
     mysql_select_db('testajax'); 
?> 

/////////////////////////// index.php rishabh 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<?php 
include('con.php'); 
?> 
<form> 
<div class="frmDronpDown"> 
    <div class="row"> 
     <table><tr><td><label>Country:</label><br/> 
     <select name="country" id="country" data-name="country" class="demoInputBox" onChange="getCountry(this.value);"> 
     <option value="">Select Country</option> 
     <?php 
     $sql = mysql_query("SELECT distinct country FROM statecont "); 
    while($result=mysql_fetch_array($sql)){ 
     ?> 
     <option value="<?php echo $result['country']; ?>"><?php echo $result['country']; ?></option> 
     <?php 
     } 
     ?> 
     </select> </td> 
      <td> 
<label>Phone:</label><br/> 
     <select name="phone" id="phone" data-name="phone" class="demoInputBox" onChange="getPhone(this.value);"> 
     <option value="">Select Country</option> 
     <?php 
     $sql = mysql_query("SELECT distinct phone FROM statecont "); 
    while($result=mysql_fetch_array($sql)){ 
     ?> 
     <option value="<?php echo $result['phone']; ?>"><?php echo $result['phone']; ?></option> 
     <?php 
     } 
     ?> 
     </select> 
</td></tr></table> 
    </div> 
    <div id="state-list"></div> 
</div> 
</form> 
<script> 
function getCountry(val) { 
     var dataname = $('#country').attr('data-name'); 

     console.log(dataname); 
    $.ajax({ 
    type: "POST", 
    url: "data.php", 
     data: { 
       value_name: val, 
       colomn_name: dataname 
       }, 
    success: function (data){ 
     $("#state-list").html(data); 
    } 
    }); 
} 

function getPhone(val) { 
     var dataname = $('#phone').attr('data-name'); 

    console.log(dataname); 
    $.ajax({ 
    type: "POST", 
    url: "data.php", 
     data: { 
       value_name: val, 
       colomn_name: dataname 
       }, 
    success: function (data){ 
     $("#state-list").html(data); 
    } 
    }); 
} 
</script> 

// ////////////////////data file data.php rishabh 
<?php 
$val = $_POST["value_name"]; 
$colomn = $_POST["colomn_name"]; 
include('con.php'); 
$sql_aa = mysql_query("SELECT * FROM statecont where ".$colomn."='$val'"); ?> 
    <table> 
<tr><td>State</td><td>Countery</td></tr> 
<?php while($result_aa=mysql_fetch_array($sql_aa)){ ?> 
<tr><td><?php echo $result_aa['state']; ?></td><td><?php echo $result_aa['country']; ?></td></tr> 
<?php } ?> 
</table>