2011-02-15 5 views
0

私はクライアントのバックエンドを開発していますが、一緒に動作するものは<select />です。具体的には、他の国でもご利用いただける国、都道府県(スペイン)の場合は3 <select />です。<select />を無効にする場合は、<option />とjQueryを使用します。

国で選択されたオプションがスペインの場合、州が入力され、州が選択されている場合は都市が設定されます。他の国が選択されている国であれば、選択、都道府県および都市はオプションなしで無効になりますが、デフォルト値は<option value="0">-- Select--</option>です。

国/都道府県/都市を選択すると、ajaxトランザクションが結果を取得します。 PHPコントローラは、結果を解析し、(のみスペイン)の結果がある場合(地域を移入する)、これを返します。

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

選択した国のための結果、コントローラリターンがない場合:

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

私の質問は、値0のオプションしかない場合は、どのように扱うことができますか?attr( "disabled"、true)を追加します。 ?

私の実際のJavaScriptコードは: - 選択 -などを - Seleccionarを

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

問題は、サイトがバイリンガルで、一部のユーザーはを確認する必要があるため、コントローラは、常にデータを返すということです - -(無効になっている場合)

ありがとうございます!

答えて

2

ですね選択ボックスは、< = 1の場合、オプション要素の長さを見つけて無効にするだけです。したがって、$.postの機能では、

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

パフォーマンスを向上させるセレクタキャッシングも追加しました。

+0

ありがとうございます。セレクタをvarに入れる方が良いでしょうか? – udexter

+0

選択するたびにパフォーマンス・サイクルがかかりますが、その選択をvarにキャッシュすると、その選択はキャッシュされません。したがって、同じセレクタを複数回呼び出す場合は、varに格納する必要があります。 – mVChr

0

理想的には、AJAXリクエストで生のHTMLの代わりにJSONが返されるようにします。

それでも、$(data)を見れば、DOMトラバーサル関数jQueryが提供する要素数を数えることができます。 optionが1つしかなく、値が0の場合は、disabledをfalseではなくtrueに設定します。

+0

お返事ありがとうございます。私はjson HTMLでエンコードすることができますか?ですから、$ return = array( "return" => true、 "html" => $ html_code)のような配列を使うことができます。 ?事前にありがとう – udexter

+0

@udexter:あなたはできますが、それは醜いですし、完全にポイントを逃す。オプションを表すセマンティックデータをJSON形式でエンコードし、受信時にJavascriptでHTMLを構築します。 HTMLがどのようなフォーマットをとるべきかを決めるのはずっと簡単です。 –

1

2番目のオプションを選択しようとすると、存在しない場合は削除できます。 ここでは、両方の状況を警告する例を示します。多くのオプションを持つ

第1の例:デフォルトのオプションでhttp://jsfiddle.net/zwKup/

第2の例では:あなただけのデータを無効にするには、返された後に一つだけのオプションがありますかどうかを確認する必要があるようhttp://jsfiddle.net/zwKup/1/

var checkSecond =$('select option:eq(1)').attr('value'); 
if (checkSecond == undefined) { 
    alert ('undefined here');} 
else {alert(checkSecond)} 
0
$(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);} 
     }); 
    } 
}); 

});

関連する問題