Disable a <select /> if there is only one <option /> with jQuery

I am developing a backend for a client and I've some <select />s that works together. Specifically, I've 3 <select /> for select country, province and city (for Spain) that works with other countries too.

If the selected option in country is Spain, province will be populated and if a province is selected city will be populated. If another country is selected in the country select, province and city will remain disabled with no option but with a default value of <option value="0">-- Select--</option>.

When a country/province/city is selected makes an ajax transaction to get the results. The PHP co开发者_如何学Cntroller parse the results and if there is results (only for Spain) returns this (to populate province):

<option value="0" >-- Select --</option>
<option value="1" >Andalucía</option>
<option value="2" >Aragón</option>
<option value="3" >Asturias</option>
...

If there is no results for the country selected, the controller returns:

<option value="0" >-- Select --</option>

My question is: how can I handle that if there is ONLY the option with value 0, add an attr("disabled", true); ?

My actual JavaScript code:

$(document).ready(function(){
    $("select#codpais").change(function() {
        var codpais = $(this).val();

        if (0 != codpais) {
            $.post(BASE_URL + 'projects/ajax/get_autonomias', { codpais: codpais }, function(data) {
                if (data) {
                    $("select#codauto").attr('disabled', false);
                    $("select#codauto").html(data);
                }
            });
        }
    });
});

The problem is that the controller ALWAYS returns data because the site is bilingual and some users needs to see -- Select -- and others -- Seleccionar -- (if is disabled too).

Thank you in advance!

---

It sounds like you just need to check if there's only one option after the data is returned then to disable the select box, so all you have to do is find the option elements length and disable if <= 1. So in your $.post function simply:

$.post(BASE_URL + 'projects/ajax/get_autonomias', { codpais: codpais }, function(data) {
    if (data) {
        var $sca = $("select#codauto");
        $sca.attr('disabled', false);
        $sca.html(data);
        if ($sca.find("option").length <= 1) {
            $sca.attr('disabled', true);
        }
    }
});

I also added selector caching to improve performance.

---

You could try to select the second option, if doesn't exist then you can remove it. Here an example that alert both situations.

First Example with many options: http://jsfiddle.net/zwKup/

Second Example with default option: http://jsfiddle.net/zwKup/1/

var checkSecond =$('select option:eq(1)').attr('value');
if (checkSecond == undefined ) {
    alert ('undefined here');}
else {alert(checkSecond)}

---

Make your AJAX request return some JSON instead of raw HTML, ideally.

Failing that, you can still look through $(data) with the DOM traversal functions jQuery provides, counting the number of elements. If there's only one option, and its value is 0, set disabled to true rather than false.

---

$(document).ready(function(){
$("select#codpais").change(function() {
    var codpais = $(this).val();

    if (0 != codpais) {
        $.post(BASE_URL + 'projects/ajax/get_autonomias', { codpais: codpais }, function(data) {
            $("select#codauto").html(data);
            if (data.length == 0) {
                $("select#codauto").attr('disabled', false);

            }else{$("select#codauto").attr('disabled', true);}
        });
    }
});

});