他の二つの選択肢がこれは私のhtmlです

Question

を行われた場合にのみ、選択要素を有効にする：

<div> 
    <select name="State" class="state"> 
    <option value="Z">Select a state</option> 
    </select> 
    <select name="City" class="city"> 
    <option value="Z">Select a city</option> 
    </select> 
    <select name="Building" class="to" disabled="true"> 
    <option value="Z">Select a Building</option> 
    </select> 
</div> 
<div> 
    <select name="State" class="state"> 
    <option value="Z">Select a state</option> 
    </select> 
    <select name="City" class="city"> 
    <option value="Z">Select a city</option> 
    </select> 
    <select name="Building" class="to" disabled="true"> 
    <option value="Z">Select a Building</option> 
    </select> 
</div> 

理想の行動：jQueryの呼び出しがときにのみ、構築するための可能な選択の選択肢を見つけるために、Djangoのバックエンドに作られています州と都市の両方で非Z値が選択されています。州、都市、建物の選択セットは複数（未知数）あります。

ここで私は擬似コードで考えています。私が持っている1つの難しさは、州または都市が変化している場合、どのようにそれに対応する.cityまたは.stateの値を見つけるかです。

$(document).ready(function() { 
    $('form').on("change", ".state, .city", function(){ 
    [pseudo] 
    if $(this) is not Z AND adjacent (state or city) is not Z 
      fetch building options in the backend 
    [end pseudo] 
    } 
    }) 
}); 

Answer 1

$('form').on('change', '.city, .state', function(e){ 
    //find the parent div that encapsulates the contextual elements 
    var $contextualDiv = $(e.target).closest('div'); 
    //find the elements within that div only 
    var $city = $contextualDiv.find('.city'); 
    var $state = $contextualDiv.find('.state'); 
    var $building = $contextualDiv.find('.to'); 

    if ($city.val() !== 'Z' && $state.val() !== 'Z') { 
     //do stuff 
    } 
});