Javascript 基于多个选择隐藏选择选项_Javascript_Jquery

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

javascript jquery

Javascript 基于多个选择隐藏选择选项,javascript,jquery,Javascript,Jquery,我有3个选择对象大学 <select id="universitySelect" size="8" multiple> <option value="1" >Oxford</option> <option value="2" >Berkley</option> <option value="3" >MIT</option> </select> 它不起作用。我首先使用cont

我有3个选择对象

大学

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

它不起作用。我首先使用contains进行测试，但最后我想使用“不包含”。我对所有jquery都是新手。。。因此，我非常感谢您的帮助。

我没有答案，但是当您想要测试这些东西时，通常可以编写一个硬编码值，而不是

$（this）.val（）

，以确保引用“this”或其他类似引用时没有问题

类似于

find（“uni:contains（1）”）

这样你就可以分析什么实际上不起作用了。

我没有答案，但是当你想测试这些东西时，你通常可以编写一个硬编码的值，而不是

$（this）.val（）

，以确保引用“this”或其他类似引用时没有问题

类似于

find（“uni:contains（1）”）

这样你就可以分析什么实际上不起作用了。

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

$（“#majorSelect”）.find（“uni:contains（“+$（this.val（）+”））.hide（）


这行行不通，它意味着在id为“majorSelect”的元素中查找标记为“uni”（不存在）的元素

$（“#universitySelect”）.on（'change'，function（）{
$（“#主要选择选项”）.hide（）；
var uni=$（this.val（）；
对于（变量i=0；i

试试这个：
$("#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();
        });
});

您可以尝试使用多个选择：
<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>


$（文档）.ready（函数（）{
$（'universitySelect'）。在（'change'，function（）上{
$（“#主要选择选项”）.hide（）；
var uni=$（this.val（）；
$.each（uni，函数（索引，值）{
$（“#主选项”）.find（“[datauni=”“+value+”]）.show（）；
});
});
$（'#majorSelect'）。在（'change'，function（）上{
$（“#学生选择选项”）.hide（）；
var major=$（this.val（）；
$。每个（主要，功能（索引，值）{
$（“#studentSelect”）.find（“[data major=”“+value+”]）.show（）；
});
});
});
牛津
伯克利
麻省理工学院
专业
工程类
生意
戏剧
体育
会计
学生
无名氏
史密斯
马克·德马格利耶
罗恩·斯蒂瑟
保拉·巴里
您可以尝试使用多个选择：
<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>


$（文档）.ready（函数（）{
$（'universitySelect'）。在（'change'，function（）上{
$（“#主要选择选项”）.hide（）；
var uni=$（this.val（）；
$.each（uni，函数（索引，值）{
$（“#主选项”）.find（“[datauni=”“+value+”]）.show（）；
});
});
$（'#majorSelect'）。在（'change'，function（）上{
$（“#学生选择选项”）.hide（）；
var major=$（this.val（）；
$。每个（主要，功能（索引，值）{
$（“#studentSelect”）.find（“[data major=”“+value+”]）.show（）；
});
});
});
牛津
伯克利
麻省理工学院
专业
工程类
生意
戏剧
体育
会计
学生
无名氏
史密斯
马克·德马格利耶
罗恩·斯蒂瑟
保拉·巴里
使用数据属性：使用数据属性：
<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>