テキストボックスの値に基づいて選択ボックスの値を動的に変更する方法

Question

テキストボックスの値に基づいて選択ボックスの値を変更したい提案をリストに表示するためにjqueryオートコンプリートを使用しています。提案を選択すると、テキストボックスの値になります。ここでは、テキストボックスの値に基づいてdiff状態の名前を表示します。

マイコード：

<div class="form-group"> 
     <label>Country*</label> 
     <span class="span_error"><?=$error_username;?></span> 
     <input name="emp_country" type="text" class="form-control" id="emp_country" placeholder="Employee Country" value="" onchange="getstate(this.value);"> 
    </div> 
    <div id="countryList"></div> 
</div> 

私はここにオートコンプリートを生成するn個の国のリストに提案を表示すると、これは偉大な働いているメートル。

選択ボックスHTML：

<div class="form-group"> 
    <label>State*</label> 
    <span class="span_error"><?=$error_username;?></span> 
    <select name="ddl_state" size="1" class="form-control" id="ddl_state"> 
     <option value="" disabled='' selected=''>Select State</option> 
    </select> 
</div> 

私は上記のテキストボックスに指定した国の名前のデフ状態の名前を表示したい

Javascriptを：

function getstate(contry) 
{ 
    alert(contry); 
    $.ajax({ 
     type:"POST", 
     url:"getdata.php", 
     data:{contry:contry}, 
     success:function(data) { 
      $('#ddl_state').html(data); 
     } 
    }); 
} 

PHP：

if (isset($_POST['contry'])) { 
    $contry = $_POST['contry']; 
    get_country_state($contry); 
} 

function get_country_state($contry) 
{ 
    $sql = "Select count_id from countries where count_name='$contry'LIMIT 1"; 
    $result = mysql_query($sql); 
    $row = mysql_fetch_array(result); 
    $country_id = $row['count_id']; 
    $sql_state = "select * from states where count_id='$country_id'ORDER BY state_name"; 
    $result_state = mysql_query($sql_state); 

    if ($result_state) { 
     // code... 
     $output='<option value="">Select State</option>'; 
     while ($ro = mysql_fetch_array($result_state)) { 
      // code... 
      $output .= '<option value="' . $ro["state_id"] .'">'.$ro["state_name"] . '</option>'; 
     } 
     echo $output; 
    } else { 
     echo mysql_error($db); 
    } 
} 

Answer 1

何かがあなたが開始し得る可能性があります：[ダイナミックドロップダウンリスト：

var obj = {'Canada' : ['Alberta', 'Manitoba', 'Quebec'], USA: ['Arizona', 'Montana', 'Washington'], EU : ['Belgium', 'Germany', 'UK Not For Long']}; 
 

 
$('#countries').change(function(){ 
 
    var ctry = this.value; 
 
    if (ctry==''){ 
 
     $('#states').fadeOut(); 
 
    }else{ 
 
     $('#states option').remove(); 
 
     for (i=0; i < obj[ctry].length; i++){ 
 
      x = obj[ctry][i]; 
 
      $('#states').append('<option value="'+x+'">'+x+'</option>'); 
 
     } 
 
     $('#states').fadeIn(); 
 
    } 
 
});

#states{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="countries"> 
 
    <option value="">Choose</option> 
 
    <option value="Canada">Canada</option> 
 
    <option value="EU">EU</option> 
 
    <option value="USA">USA</option> 
 
</select> 
 
<select id="states"></select>

Answer 2

問題があるため、ここでこのラインの、

<input ... onchange="getstate(this.value);"> 
      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

onchangeイベントは、テキストボックスがフォーカスを失った後にのみ起動されますされています。このテキストボックスで複数のイベントをバインドする必要があります。

だから、最初の変更以下の方法でこの<input>要素、JavaScriptコードで、その後

<input name="emp_country" type="text" class="form-control" id="emp_country" placeholder="Employee Country" value=""> 

そして、このようにこのテキストボックスで複数のイベントをバインド：

var contry = ''; 
$("#emp_country").on('change keyup paste mouseup', function() { 
    if ($(this).val() != contry) { 
     contry = $(this).val(); 
     if(contry.length){ 
      $.ajax({ 
       type:"POST", 
       url:"getdata.php", 
       data:{contry:contry}, 
       success:function(data){ 
        $('#ddl_state').html(data); 
       } 
      }); 
     } 
    } 
}); 

---

注意：mysql_*関数を使用しないでください。これらの関数はPHP 5.5以降で廃止され、PHP 7.0では完全に削除されています。代わりにmysqliまたはpdoを使用してください。 And this is why you shouldn't use mysql_* functions。このような