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();
});

Fiddle here.

Answer 3

属性name和id仅适用于select代码。 Open this link查看标准选择选项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 example

Answer 5

如果选择same1作为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()

 });
 })

DEMO

注意，完全删除后您将无法再次显示，因此我建议您更改课程时使用show和hide

Answer 6

我希望我做对了你想做的事。试试this fiddle

您可以.hide()选择与当前所选内容相匹配的选项，并仅显示之前隐藏.show()当前:hidden元素的内容吗？

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

jQuery - 选择选项事件

6 个答案: