代码之家 › 专栏 › 技术社区 › H C

仅当进行了两个其他选择时才启用选择元素

django html jquery

H C · 技术社区 · 7 年前

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

期望的行为:仅当为州和城市选择了非Z值时,才会对django后端进行jquery调用,以查找用于构建的可能选择。有多个(未知数量)州、城市、建筑选择集。

以下是我在伪代码中考虑的内容。我遇到的一个困难是,如果一个州或一个城市发生了变化,你如何找到同一个州内相应的城市或一个州的值。

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

1 回复 | 直到 7 年前

Taplar 7 年前

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前