Question

我有3个选择对象。

大学

<select id="universitySelect" size="8" multiple>
    <option value="1" >Oxford</option>
    <option value="2" >Berkley</option>
    <option value="3" >MIT</option>
</select>

主要

<select id="majorSelect" size="8" multiple>
    <option value="m1" uni="1">Engineering</option>
    <option value="m2" uni="2">Business</option>
    <option value="m3" uni="1">Drama</option>
    <option value="m4" uni="3">Physical Education</option>
    <option value="m5" uni="2">Accounting</option>
</select>

学生

<select id="studentSelect" size="8" multiple>
    <option value="s1" uni="1" major="m1">John Doe</option>
    <option value="s2" uni="2" major="m2">Josh Smith</option>
    <option value="s3" uni="1" major="m4">Mark Demagliyeh</option>
    <option value="s4" uni="3" major="m2">Ron Teaser</option>
    <option value="s5" uni="2" major="m3">Paula Barry</option>
</select>

如果选择了一所大学，我希望Major选择只显示该大学的专业和该大学的学生。

如果选择了Major，我只想向该专业的学生展示，无论大学标签如何。我不想删除这些元素，因为它们可能会被重新选中。我只想隐藏＆＃39;它们。

目前我正在加载javascript中的所有数据。 3阵列并根据所选内容填充第二和第三选择而不使用标签。

他们是否以任何方式隐藏＆＃34;元素而不必在javascript中加载数组？

我从这开始：

$("#universitySelect").on('change',function() {
    $("#universitySelect option:selected" ).each(function() {
            $("#majorSelect").find("uni:contains(" + $(this).val() + ")").hide();
    });
});

它不起作用。我首先使用contains来测试，但最后我想使用＆＃34;不包含＆＃34;。我是所有jquery的新手...所以我很感激帮助。

Answer 1

如评论中所提到的，您应该使用data- *属性，例如：

<option data-uni="1">foo</option>
$("#majorSelect").find("uni:contains(" + $(this).val() + ")").hide();

这一行不起作用，它意味着在id为“majorSelect”的元素中找到带有“uni”（不存在）标签的元素

$("#universitySelect").on('change',function() {
  $("#majorSelect option").hide();
  var uni = $(this).val();
  for (var i = 0; i < uni.length; i++) {
    $("#majorSelect option[uni='"+uni[i]+"']").show();
  }
});

$("#majorSelect").on('change',function() {
  $("#studentSelect option").hide();
  var major = $(this).val();
  for (var i = 0; i < major.length; i++) {
    $("#studentSelect option[major='"+major[i]+"']").show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="universitySelect" size="8" multiple>
    <option value="1" >Oxford</option>
    <option value="2" >Berkley</option>
    <option value="3" >MIT</option>
</select>
<select id="majorSelect" size="8" multiple>
    <option value="m1" uni="1">Engineering</option>
    <option value="m2" uni="2">Business</option>
    <option value="m3" uni="1">Drama</option>
    <option value="m4" uni="3">Physical Education</option>
    <option value="m5" uni="2">Accounting</option>
</select>
<select id="studentSelect" size="8" multiple>
    <option value="s1" uni="1" major="m1">John Doe</option>
    <option value="s2" uni="2" major="m2">Josh Smith</option>
    <option value="s3" uni="1" major="m4">Mark Demagliyeh</option>
    <option value="s4" uni="3" major="m2">Ron Teaser</option>
    <option value="s5" uni="2" major="m3">Paula Barry</option>
</select>

Answer 2

试试这个：

$("#universitySelect").on('change',function() {
        $("#majorSelect,#studentSelect").hide();
        $("#universitySelect option:selected" ).each(function() {

                $("#majorSelect,#studentSelect").find('option[uni="'+ $(this).val() +'"]').show();
        });
});

$("#majorSelect").on('change',function() {
        $("#studentSelect").hide();
        $("#universitySelect option:selected" ).each(function() {

                $("#studentSelect").find('option[major="'+ $(this).val() +' "]').show();
        });
});

Answer 3

我没有答案，但是当你想测试这些东西时，你通常可以写一个硬编码的值，而不是var interstitial: GADInterstitial! var showAd = true viewdidload { self.createandLoadInterstitial() } func createAndLoadInterstitial() { interstitial = GADInterstitial(adUnitID: "ca-app-pub-3940256099942544/4411468910") interstitial.delegate = self let request = GADRequest() interstitial.loadRequest(request) } override func viewDidAppear(animated: Bool) { if (interstitial.isReady && showAd) { showAd = false print("iterstitalMain is ready") interstitial.presentFromRootViewController(self) self.createAndLoadInterstitial() } else{ showAd = true } }只是为了确保参考＆没有问题。＃34;这＆＃34;或其他此类参考。

就像$(this).val()。

这样你就可以分析实际上不起作用的东西了。

Answer 4

你可以尝试这个，使用多个选择：

<script>
$(document).ready(function(){
    $('#universitySelect').on('change',function(){
        $('#majorSelect option').hide();

        var uni = $(this).val();
        $.each(uni,function(index,value){
            $('#majorSelect').find("[data-uni='" + value + "']").show();
        });

    });

    $('#majorSelect').on('change',function(){
        $('#studentSelect option').hide();

        var major = $(this).val();
        $.each(major,function(index,value){
            $('#studentSelect').find("[data-major='" + value + "']").show();
        });

    });
});


</script>
<select id="universitySelect" size="8" multiple>
    <option value="1" >Oxford</option>
    <option value="2" >Berkley</option>
    <option value="3" >MIT</option>
</select>
Major

<select id="majorSelect" size="8" multiple>
    <option value="m1" data-uni="1">Engineering</option>
    <option value="m2" data-uni="2">Business</option>
    <option value="m3" data-uni="1">Drama</option>
    <option value="m4" data-uni="3">Physical Education</option>
    <option value="m5" data-uni="2">Accounting</option>
</select>
Students

<select id="studentSelect" size="8" multiple>
    <option value="s1" data-uni="1" data-major="m1">John Doe</option>
    <option value="s2" data-uni="2" data-major="m2">Josh Smith</option>
    <option value="s3" data-uni="1" data-major="m4">Mark Demagliyeh</option>
    <option value="s4" data-uni="3" data-major="m2">Ron Teaser</option>
    <option value="s5" data-uni="2" data-major="m3">Paula Barry</option>
</select>

隐藏基于多个选择的选择选项

4 个答案: