how to dynamically change the values of select box based on the value of textbox

Question

I want to change the values of select box based on the value of text box I'm using jquery autocomplete to display the suggestions in a list and when I select a suggestion it becomes the value of text box now I want to display the names of diff states based on the value of the text box.

My code:

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

I m generating autocomplete here n displaying the suggestions in Country list and this is working great.

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

I want to display the names of diff states of the Country name given in the above text box

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);
    }
}

Although it's not an answer to your question, you might want to check out my answer on this question: [Dynamic drop down list for different countries, states, geographic locations?](http://stackoverflow.com/questions/26069761/dynamic-drop-down-list-for-different-countries-states-geographic-locations/26076664#26076664). It includes a fully functioning script for what you're trying to achieve and is also safe against MySQL injection (as yours isn't). — icecub, Jun 27 '16 at 20:50
Could you please post your jQuery call, thx. You could make use of the change event of jQuery's autocomplete, see http://api.jqueryui.com/autocomplete/#event-change — Webomatik, Jun 27 '16 at 20:59

score 0 · Answer 1 · edited May 23 '17 at 12:24

The problem is because of this line here,

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

The onchange event will be fired only after the textbox loses focus. You need to bind multiple events with this textbox.

So first change this <input> element in the following way,

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

And then in your JavaScript code, bind multiple events with this textbox like this:

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);
                }
            });
        }
    }
});

Note: Don't use mysql_* functions, they are deprecated as of PHP 5.5 and are removed altogether in PHP 7.0. Use mysqli or pdo instead. And this is why you shouldn't use mysql_* functions.

score 0 · Accepted Answer · answered Jun 27 '16 at 21:52

Something like this might get you started:

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>

how to dynamically change the values of select box based on the value of textbox

2 Answers2