jQuery-选择事件时

Question

我试图做到这一点，所以当有人从我的列表中选择某个选项时，它将触发一个事件。 我知道您应该使用.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门课程的列表中将其删除。

任何想法这将如何工作？ 我正在寻求其他方法的建议。

Answer 1

使用delegation

$('body').delegate('#course1','change',function(){
    $("#course2 option[value='Math']").each(function() {
        $(this).remove();
    });
})

Answer 2

尝试：

$("body").on("change","#course1",function () {
     $("#course2").find("option[value='Math']").remove();
});

在这里摆弄。

Answer 3

仅用于select标记的属性name和id 。 打开此链接以查看标准选择选项html标记。 如果这样做，则那里有两个相同的ID。 <select>和您的第一个<option> 。

尝试将您的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>';
}

Answer 4

这是我能想到的最短的时间：

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

jsFiddle示例

Answer 5

如果选择了课程1，则将从课程2中隐藏该选项，并显示用户是否在课程1中选择了另一个

$('#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时使用show and hide

Answer 6

希望我做对了。 试试这个小提琴

您可以仅.hide()匹配当前所选内容的选项，然后再次显示.show()显示当前:hidden元素？

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