동적으로 텍스트 상자의 값을 기준으로 선택 상자의 값을 변경하는 방법

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> 

나는 위의 텍스트 상자에 주어진 국가 이름의 DIFF 상태의 이름을 표시 할

자바 스크립트 :

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> 요소, 자바 스크립트 코드에서 다음

<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. 이 같은