如果没有值，则禁用下拉列表并移至下一个下拉列表

Question

I have 4 dropdown list using ajax. I works fine if values were found on each respective dropdown.

But if there is no value in 3rd dropdown it doesn't load to 4th automatically and doesn't disable 3rd dropdown either. Insted, I get a blank option to choose from 3rd dropdown, which if I select then it loads 4th dropdown.

Ajax Code:

function selectState(country_id){
    if(country_id!="0"){
        loadData('state',country_id);
        $("#region_dropdown").html("<option value='0'>Select Region</option>");
    }else{
        $("#state_dropdown").html("<option value='0'>Select state</option>");
        $("#region_dropdown").html("<option value='0'>Select Region</option>");
    }
}
function selectRegion(state_id){
    if(state_id!="0"){
        loadData('region',state_id);
        $("#city_dropdown").html("<option value='0'>Select city</option>");
    }else{
        $("#region_dropdown").html("<option value='0'>Select Region</option>");
        $("#city_dropdown").html("<option value='0'>Select city</option>");
    }
}
function selectCity(state_region_id){
    if(state_region_id!="0"){
        loadData('city',state_region_id);
    }else{
        $("#city_dropdown").html("<option value='0'>Select city</option>");
    }
}

    var dataString = 'loadType='+ loadType +'&loadId='+ loadId;
    $("#"+loadType+"_loader").show();
    $("#"+loadType+"_loader").fadeIn(400).html('Please wait... <img src="http://localhost/admin/includes/images/loading.gif" />');
    $.ajax({
        type: "POST",
        url: "loadData",
        data: dataString,
        cache: false,
        success: function(result){
            $("#"+loadType+"_loader").hide();
            $("#"+loadType+"_dropdown").html("<option value='0'>Select "+loadType+"</option>");  
            $("#"+loadType+"_dropdown").append(result);  
        }
    });
}

And View:

<?php if($list->num_rows() > 0){ ?>
<select class="full-width" name="v_item_country" onchange="selectState(this.options[this.selectedIndex].value)">
<option value="0">Country</option>
    <?php foreach($list->result() as $listElement): ?>
        <option value="<?= $listElement->v_country_id?>"><?= $listElement->v_country_name?></option>
    <?php endforeach; ?>
</select>
<select class="full-width" name="v_item_state" id="state_dropdown" onchange="selectRegion(this.options[this.selectedIndex].value)">
    <option value="0">State</option>
</select>
<select class="full-width" name="v_item_region" id="region_dropdown" onchange="selectCity(this.options[this.selectedIndex].value)">
    <option value="0">Region</option>
</select>
<select class="full-width" name="v_item_city" id="city_dropdown">
    <option value="0">City</option>
</select>
<?php }else{ echo 'No Country Name Found'; } ?>

And Controller:

public function loadData()
{
    $loadType=$_POST['loadType'];
    $loadId=$_POST['loadId'];

    $this->load->model('admin/model_users');
    $result=$this->model_users->getData($loadType,$loadId);
    $HTML="";

    if($result->num_rows() > 0){
        foreach($result->result() as $list){
            $HTML.="<option value='".$list->id."'>".$list->name."</option>";
        }
    }
    echo $HTML;
}

Model:

function getCountry(){
    $this->db->select('v_country_id,v_country_name');
    $this->db->from('vbc_country');
    $this->db->order_by('v_country_name', 'asc'); 
    $query=$this->db->get();
    return $query; 
}
function getData($loadType,$loadId){
    if($loadType=="state"){
        $fieldList='id,v_state_name as name';
        $table='vbc_state';
        $fieldName='country_id';
        $orderByField='v_state_name';                       
    }elseif($loadType == "region"){
        $fieldList='id,v_state_region_name as name';
        $table='vbc_state_region';
        $fieldName='state_id';
        $orderByField='v_state_region_name';
    }else{
        $fieldList='id,v_city_name as name';
        $table='vbc_city';
        $fieldName='state_region_id';
        $orderByField='v_city_name';
    }
    $this->db->select($fieldList);
    $this->db->from($table);
    $this->db->where($fieldName, $loadId);
    $this->db->order_by($orderByField, 'asc');
    $query=$this->db->get();
    return $query; 
}

</div>

Answer 1

Try this:

public function loadData()
{
    $loadType=$_POST['loadType'];
    $loadId=$_POST['loadId'];

    $this->load->model('admin/model_users');
    $result=$this->model_users->getData($loadType,$loadId);
    $HTML="";

    if($result->num_rows() > 0){
        foreach($result->result() as $list){
            $HTML.="<option value='".$list->id."'>".$list->name."</option>";
        }
    }
    else {
      $HTML.="<option value='disabled' disabled>No results found...</option>";
    }
    echo $HTML;
}