jQuery-选择事件时

Question

I am trying to make it so when somebody selects a certain option from my list it will trigger an event. I know you are supposed to use the .change event but that isn't working for me.

Checkout the code below.

Select:

$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>

I basically used PHP to make it so there are four different select options with the same options but different values for a grading system. I want to use this script to make it so when you select Math for the first course it will remove it from the list in the other 3 courses.

Any ideas how this would work? I'm up for suggestions on other ways to do this.

Answer 1

Use delegation

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

Answer 2

Try:

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

Fiddle here.

Answer 3

Attribute name and id just for only select tag. Open this link to see standard select option html tag. If you do that, you have two same id there. <select> , and your first <option> .

try to change your PHP become :

$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

This is the shortest I could come up with:

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

jsFiddle example

Answer 5

this will hide the option from course2 if same is selected as course1 and show if user selects another one in 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

Note that after removing completely you will not be able to show it again hence i will recommend using show and hide on change of course1

Answer 6

I hope I got right what you want to do. Try this fiddle

You could just .hide() the option which matches the current selected and to show the before hidden again just .show() the current :hidden elements?

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