Javascript jQuery-On选择选项事件

我试图让它这样，当有人从我的列表中选择某个选项时，它将触发一个事件。我知道你应该使用.change事件，但这对我不起作用

检查下面的代码

选择：

$co1 = array("English", "Math", "Science", "History");
for($c=1;$c<5;$c++){
    echo '<select name="c'.$c.'" id="course'.$c.'" class="selectpicker"><option selected="selected" id="course'.$c.'" value="course'.$c.'" name="'.$c.'">Course '.$c.'</option>';
    foreach ($co1 as &$cl1){
        echo '<option value="'.$cl1.'" name="'.$cl1.'">'.$cl1.'</option>';  
    }
    echo '</select>';
}

jQuery：

<script>
    $('#course1').change(function(){
        $("#course2 option[value='Math']").each(function() {
            $(this).remove();
        });
    })
</script>

我基本上是用PHP制作的，所以有四个不同的选择选项，它们的选项相同，但评分系统的值不同。我想使用这个脚本，这样当你为第一门课程选择数学时，它将从其他3门课程的列表中删除它

你知道这是怎么回事吗？我正在寻求其他方法的建议。

使用授权

尝试：

属性名称和id仅用于select标记。要查看标准选项，请选择html标记。 如果你这样做，你有两个相同的身份证，还有你的第一次

尝试将您的PHP更改为：

$co1 = array("English", "Math", "Science", "History");
for($c=1;$c<5;$c++){
    echo '<select name="c'.$c.'" id="course'.$c.'" class="selectpicker">
             <option selected="selected" value="course'.$c.'">Course '.$c.'</option>';
             foreach ($co1 as &$cl1){
                echo '<option value="'.$cl1.'">'.$cl1.'</option>';  
             }
    echo '</select>';
}

---

这是我能想到的最短的：

$('#course1').change(function () {
    $('#course2').find('option:gt(0)').remove().end().append($(this).find('option:gt(0)[value!=' + $(this).val() + ']').clone())
})

---

如果选择了与course1相同的选项，则会在course2中隐藏该选项，并显示用户是否在course1中选择了另一个选项

$('#course1').change(function () {
  var val = $(this).val()
        
  if($('#course2').val()==val)                
    $('#course2').val($('#course2').children('option:first').val())
        
  $("#course2 option").each(function () {

   if ($(this).val() == val) 
     $(this).hide();  //change this line to $(this).remove() to remove permanently  
                     //and remove the else part below
   else 
     $(this).show()
        
 });
 })

---

请注意，完全删除后，您将无法再次显示它，因此我建议您在课程更改时使用“显示”和“隐藏”1

我希望我正确地理解了您想要做的事情。试一试

您可以只是。隐藏与当前所选元素匹配的选项，并在再次隐藏之前显示。显示当前：隐藏元素

$('#course1').change(function(){
    var sel = $(this).val(); 
    $("#course2 option:hidden").show();
    $("#course2 option[value='"+sel+"']").each(function() {
        $(this).hide();
    });    
});

---

---

PHP与这个问题无关。请发布呈现的HTML。$course2选项[value='Math']。删除应该可以正常工作。@tymeJV它可以工作，但事件不工作。。。我将发布一篇文章。我发现您的选择选项不是jQuery 1.7的标准html标记。委托已被.on方法取代。这并没有解决它。它仍然没有从第二个选择中删除数学。由于某些原因，这不起作用：/I我正在使用最新的jQuery。不过，控制台确实返回了一些信息。event.returnValue已弃用。请改用标准event.preventDefault。由于您没有使用。。在你的HTML中。它显示了结构。在此之前，不会触发更改事件。它不显示结构，请查看页面的源代码。我已经设置了。我使用PHP而不是HTML将其打印到页面上，因为我使用了for循环。@user2812028-问题似乎是呈现页面上除了您的选择之外还有一系列的div和按钮。此外，您拥有的jQuery不在文档就绪调用中。这似乎是您正在使用的某些引导选择脚本的结果。这在纯HTML中非常有效。不确定为什么它在我的文档中不起作用：/Checkout我对@Hiral答案的最新评论，我有一个指向完整文档的链接。如果你能找到问题所在，我会非常感激：当你尝试使用我的代码时，你是否检查了控制台的错误？顺便说一句，为什么在你的pastebin示例中，你要包含两次jQuery？我想我错过了这一部分。是的，它只显示1个错误事件。returnValue已弃用。请改用标准event.preventDefault。谢谢！这正是我所需要的，但由于某些原因，这在我的文档中不起作用。：/也许我包含了错误的jQuery库？但如果我是，它会说我选错了。尽管不推荐使用.event.returnValue，控制台仍会打印此错误。请改用标准event.preventDefault。@user2812028这是一个警告而不是错误，与代码无关。我认为问题出在文档的其他地方。您的php是否生成正确的html输出？是的。至少我相信是这样。@user2812028你必须确定这一点。只需右键单击元素并从上下文菜单中选择inspect element选项，然后仔细观察控制台中的每个标记打开、关闭、id、值等。

$('#course1').change(function () {
  var val = $(this).val()
        
  if($('#course2').val()==val)                
    $('#course2').val($('#course2').children('option:first').val())
        
  $("#course2 option").each(function () {

   if ($(this).val() == val) 
     $(this).hide();  //change this line to $(this).remove() to remove permanently  
                     //and remove the else part below
   else 
     $(this).show()
        
 });
 })

$('#course1').change(function(){
    var sel = $(this).val(); 
    $("#course2 option:hidden").show();
    $("#course2 option[value='"+sel+"']").each(function() {
        $(this).hide();
    });    
});