JQueryカスケードドロップダウンの問題？

Question

私はJQueryをベースにしていますが、おそらく動作していますが、問題がたくさんありました。

誰かがこのプラグインに直面している可能性があります。

だから、私は場所ろ過

location http://clip2net.com/clip/m12007/1246819525-clip-2kb.png location http://clip2net.com/clip/m12007/1246819608-clip-3kb.png

ため、このプラグインを使用すると、ここに私のCSコードが付属しています。

public JsonResult getChildren(string val) 
    { 
     if (val.IsNotNull()) 
     { 
      int lId = val.ToInt(); 
      Cookie.Location = val.ToInt(); 
      var forJSON = from h in Location.SubLocationsLoaded(val.ToInt()) 
          select new { When = val, Id = h.Id, Name = h.Name, LocationName = h.LocationType.Name }; 
      return this.Json(forJSON.ToArray()); 
     } 
     else 
      return null; 
    } 

ここに私のJSコードが来る：

<script type="text/javascript"> 
function commonMatch(selectedValue) { 
    $("#selectedLocation").val(selectedValue); 
    return this.When == selectedValue; 
}; 
function commonTemplate(item) { 
    return "<option value='" + item.Id + "'>" + item.Name + "</option>"; 
}; 


$(document).ready(function() { 
    $("#chained_child").cascade("#Countries", { 
     ajax: { 
      url: '/locations/getChildren' 
     }, 
     template: commonTemplate, 
     match: commonMatch 
    }).bind("loaded.cascade", function(e, target) { 
     $(this).prepend("<option value='empty' selected='true'>------[%Select] Län------</option>"); 
     $(this).find("option:first")[0].selected = true; 
    }); 
    $("#chained_sub_child").cascade("#chained_child", { 
     ajax: { 
      url: '/locations/getChildren' 
     }, 
     template: commonTemplate, 
     match: commonMatch 
    }).bind("loaded.cascade", function(e, target) { 
     $(this).prepend("<option value='empty' selected='true'>------[%Select] Kommun------</option>"); 
     $(this).find("option:first")[0].selected = true; 
    }); 
    $("#chained_sub_sub_child").cascade("#chained_sub_child", { 
     ajax: { 
      url: '/locations/getChildren' 
     }, 
     template: commonTemplate, 
     match: commonMatch 
    }).bind("loaded.cascade", function(e, target) { 
     $(this).prepend("<option value='empty' selected='true'>------[%Select] Stad------</option>"); 
     $(this).find("option:first")[0].selected = true; 

    }); 

}); 

私が選択した値なしでAjaxリクエストを防ぐために

if (opt.getParentValue(parent) != "empty") 
      $.ajax(_ajax); 

をjquery.cascade.ext.jsする一つの条件を追加しましたが、私は最初のボックスの3Dボックスと怒鳴るに選択をリセットしたとき、私は、問題に直面しませんリフレッシュ： WTF? http://clip2net.com/clip/m12007/1246822534-clip-2kb.png

そして第二の問題： 私は1つの要件で、何かを行います私自身の機能を注入するのに最適な場所がどこにあるか知っていただきたいと思います - 私はすべてのボックスは、仕事を終えていることを知る必要があります。

誰かが私の中で働いてくれたら、一緒に解決策を見つけることができるかもしれません。 アドバイスありがとうございました...

Answer 1

オリジナルのプラグインコードの問題は、ドロップダウンを操作した後で変更イベントを発生させないことです。

また、私はこの問題を「依存性」といい、「カスケード」ではないと考えています。私はシンプルなプラグインとデモページを作成しようとしましたが、そのデモページはすべてのことがどのように機能するかを示しています。

デモ：http://jsbin.com/unope

コード：http://jsbin.com/unope/edit

は私が私が行っているかを説明しましょう。私はあなたがドロップダウンの依存関係を関連付けることができます '従属'というプラグインを作成しました。

上記のコード

$('#dropDown2').dependent({ 
          dependency : 'dropDown1', 
          values : getValues 
         }); 

dropDown2がdropDown1に依存していることを示唆しているので、いつでもdropDown1値が変化すると、それは（それをdropDown1を渡して）あなたにgetValues関数を呼び出します。関連する値をgetValues関数から返す必要があります。これにより、dropDown2に値が設定されます。

このコードは一般的ではないことを覚えておいてください。私はすぐにコンセプトを示すために書きました。あなたはあなたの望む結果を達成するためにそれをさらに微調整する必要があります。

は、ご質問があれば私に教えてください。