如何根據文本框的值動態更改選擇框的值

我想根據文本框的值更改選擇框的值我正在使用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); 
    } 
}

來源

2016-06-27 Talha Sarwar

儘管這不是一個回答你的問題，你可能想看看我對這個問題的答案：[動態下拉列表爲不同的國家，州，地理位置？]（http://stackoverflow.com/questions/26069761/dynamic-drop-down-list-for-different-countries-states-geographic-locations/26076664#26076664）。它包含一個功能齊全的腳本，用於實現您想要實現的功能，並且還可以安全地防止MySQL注入（因爲您不是）。 – icecub

你可以請你發佈你的jQuery調用，thx。您可以使用jQuery的自動完成更改事件，請參閱http://api.jqueryui.com/autocomplete/#event-change – Webomatik

像這樣的東西可能讓你開始：

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>

來源

2016-06-27 21:52:30 gibberish

的問題是，因爲這條線在這裏，

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

的onchange事件後，纔將文本框失去焦點被解僱。您需要使用此文本框綁定多個事件。

所以第一個變化通過以下方式這<input>元素，

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

然後在你的JavaScript代碼，綁定多個事件與該文本是這樣的：

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。

來源

2016-06-27 21:11:02

如何根據文本框的值動態更改選擇框的值

回答

相關問題