javascript - 根据给定的值过滤选择框，默认值为无

Question

我在这个项目上工作，用户在那里选择“区域”，属于该区域或与该区域相关的数据将列在下一个名为“城市”的“选择框”中，我设法锻炼了该区域和城市，它正在运行在这个社区的帮助下，我非常感激。

我的问题是，如果我选择特定城市，则属于该城市的数据必须在 barangay 列表中。

有一件事我忘记了，如果区域是空的，城市列表一定不能显示。

如果您需要 fiddle

html

<script src="http://code.jquery.com/jquery-git.js"></script>
<p>SELECT YOUR THE REGION
<select type="text" value="" id="region">
<option value="">Please Select Your Region</option>
<option value="CompostelaValey">CompostelaValey</option>
<option value="DavaoOriental">DavaoOriental</option>
</select></p><br><br> 

<p>SELECT YOUR THE CITY
<select type="text" name="city" id="city">
<option value="">Please Select City/Municipality</option>

<option value="DavaoOriental" id="Baganga">Baganga</option>
<option value="CompostelaValey" id="Maragusan">Maragusan</option>
<option value="DavaoOriental" id="MatiCity">MatiCity</option>
</select></p><br><br>

<p>SELECT YOUR THE BARANGAY
<select type="text" id="brgy">
<option value="">Barangay</option>
<option value="Baganga">Baculin</option>
<option value="Baganga">Batawan</option>
<option value="Baganga">Batiano</option>
<option value="Baganga">Binondo</option>
<option value="Baganga">Bobonao</option>
<option value="Baganga">Campawan</option>
<option value="Baganga">Central</option>
<option value="Baganga">Dapnan</option>
<option value="Baganga">Kinablangan</option>
<option value="Baganga">Lambajon</option>
<option value="Baganga">Lucod</option>
<option value="Baganga">Mahan-ub</option>
<option value="Baganga">Mikit</option>
<option value="MatiCity">Central</option>
<option value="MatiCity">Badas</option>
<option value="MatiCity">Matiao</option>
<option value="Maragusan">kalapagan</option>
</select></p><br><br>

脚本

$(document).ready(function() {
    $("#region").change(function(){
    var val=$(this).val();
    $("#city option").hide();
        $("#city").val("");
    $("#city option[value='"+val+"']").show();
  $("#city").change();
});

Answer 1

我使用了相同的隐藏逻辑并使用 id 作为值来过滤选项:

$(document).ready(function() {
  $("#city").change(function() {
    var val = $(this).find(":selected").prop("id");
    $("#brgy option").hide();
    $("#brgy").val("");
    $("#brgy option[value='" + val + "']").show();
  });
  $("#region").change(function() {
    var val = $(this).val();
    $("#city option").hide();
    $("#city").val("");
    $("#city option[value='" + val + "']").show();
    $("#city").change();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>SELECT YOUR THE REGION
  <select type="text" value="" id="region">
    <option value="">Please Select Your Region</option>
    <option value="CompostelaValey">CompostelaValey</option>
    <option value="DavaoOriental">DavaoOriental</option>
  </select>
</p><br><br>

<p>SELECT YOUR THE CITY
  <select type="text" name="city" id="city">
    <option value="">Please Select City/Municipality</option>

    <option value="DavaoOriental" id="Baganga">Baganga</option>
    <option value="CompostelaValey" id="Maragusan">Maragusan</option>
    <option value="DavaoOriental" id="MatiCity">MatiCity</option>
  </select>
</p><br><br>

<p>SELECT YOUR THE BARANGAY
  <select type="text" id="brgy">
    <option value="">Please Select Your Barangay</option>
    <option value="Baganga">Baculin</option>
    <option value="Baganga">Batawan</option>
    <option value="Baganga">Batiano</option>
    <option value="Baganga">Binondo</option>
    <option value="Baganga">Bobonao</option>
    <option value="Baganga">Campawan</option>
    <option value="Baganga">Central</option>
    <option value="Baganga">Dapnan</option>
    <option value="Baganga">Kinablangan</option>
    <option value="Baganga">Lambajon</option>
    <option value="Baganga">Lucod</option>
    <option value="Baganga">Mahan-ub</option>
    <option value="Baganga">Mikit</option>
    <option value="MatiCity">Central</option>
    <option value="MatiCity">Badas</option>
    <option value="MatiCity">Matiao</option>
    <option value="Maragusan">kalapagan</option>
  </select>
</p><br><br>