禁用< select/>如果只有一个< option/>与jQuery [英] Disable a <select /> if there is only one <option /> with jQuery

问题描述

我正在为客户端开发后端，并且我有一些<select />可以一起工作.具体来说，我为与其他国家/地区合作的所选国家/地区，省份和城市(针对西班牙)设置了3个<select />.

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.

如果在国家/地区中选择的选项是西班牙，则将填充省份；如果选择了省份，则将填充城市.如果在选择的国家/地区中选择了其他国家/地区，则省份和城市将保持禁用状态，且没有任何选项，但默认值为<option value="0">-- Select--</option>.

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

选择国家/地区/城市后，进行ajax交易以获取结果. PHP控制器解析结果，如果有结果(仅适用于西班牙)，则返回此结果(以填充省份):

When a country/province/city is selected makes an ajax transaction to get the results. The PHP controller 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>

我的问题是:如果只有值为0的选项，我该如何处理呢?添加一个attr("disabled"，true); ?

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

我的实际JavaScript代码:

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

提前谢谢！

推荐答案

听起来您只需要检查返回数据后是否只有一个选项，然后禁用选择框，所以您要做的就是查找选项元素的长度，如果< = 1，则禁用.因此，在您的$.post函数中只需:

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.

这篇关于禁用&lt; select/&gt;如果只有一个&lt; option/&gt;与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！