Question

我想根据文本框的值更改选择框的值我使用jquery自动完成功能来显示列表中的建议，当我选择一个建议时它现在变成文本框的值我要显示基于文本框值的差异状态名称。

我的代码：

    <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

问题在于这一行，

<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

Answer 2

这样的事情可能会让你开始：

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>

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

2 个答案: