javascript - 如果值等于或在 jquery 中选择，则附加选择选项

Question

我有 2 个选择标签。第二个取决于第一个。如果我仅按值检查它就可以工作，但我还需要检查是否已选择。

if(el.val() === "LOCATIONS" || el.is(' option:selected') ){
 $("#status option").remove();
 $("#status").append("<option value=''>All Packages</option><option value=''>KL</option>");
}

我正在尝试制作依赖的选择下拉列表。如果我删除 el.is('option:selected')它根据第一个选择的所选选项附加选项。但如果在第一个下拉列表中选择了任何选项，它还应该附加选项

这里是jsfiddle

Answer 1

即使您检查一个条件(即所选选项的值)，它仍然有效。但要传递两个条件，您必须使用 && 运算符，而不是 el.is('option:selected')，您可以将其更改为 ("el :selected"); 如下，

$(document).ready(function() {
var a = $("#source > option:selected").val();
if(a == "REGIONAL"){
    $("#status option").remove();
        $("#status").append("<option value=''>All Packages</option><option value='Airports'>Airports</option>");
}
$("#source").change(function() {    
    var el = $(this);
    if((el.val() === "AUDIENCES SEGMENT") && ('el:selected')) {
    $("#status option").remove();
    $("#status").append("<option value=''>All Packages</option><option value='Youth'>Youth</option><option value='Working Adults'>Working Adults</option><option value='Family'>Family</option><option value='Travellers'>Travellers</option>");
    }
      else if((el.val() === "REGIONAL") && ('el:selected')) {
        $("#status option").remove();
        $("#status").append("<option value=''>All Packages</option><option value='Airports'>Airports</option>");
        
        }
        
        else if((el.val() === "LOCATIONS") && ('el:selected')) {
        $("#status option").remove();
        $("#status").append("<option value=''>All Packages</option><option value=''>KL</option>");
        
        }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Source:
  <select id="source" name="source">
     <option>All Types</option>
     <option value="AUDIENCES SEGMENT">AUDIENCES SEGMENT</option>
     <option selected value="REGIONAL">REGIONAL</option>
     <option value="LOCATIONS">LOCATIONS</option>
  </select>

Status:

<select id="status" name="status">
    <option>All Packages</option>
</select>