如何根据文本框的值动态更改选择框的值

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>

我在这里生成自动完成功能，并在国家/地区列表中显示建议，效果很好。

选择框 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>元素，

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