jQuery - 在选择选项事件时

jQuery - On Select Option Event

本文关键字：事件 选项 选择 jQuery      更新时间：2023-09-26

我试图做到这一点，当有人从我的列表中选择某个选项时，它会触发一个事件。我知道你应该使用 .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>';
}

j查询：

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

我基本上使用 PHP 来制作它，因此有四个不同的选择选项，具有相同的选项，但评分系统的值不同。我想使用此脚本来制作它，以便当您为第一门课程选择数学时，它会将其从其他 3 门课程的列表中删除。

任何想法这将如何工作？我愿意就其他方法提出建议。

使用 delegation 

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

尝试：

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

在这里摆弄。

属性

name和id仅适用于select标签。打开此链接以查看标准选择选项 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>';
}
这是我

能想到的最短的：

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

js小提琴示例

如果选择相同作为课程 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()
        
 });
 })

演示

请注意，完全删除后，您将无法再次显示它，因此我建议在更改路线时使用show和hide 1

我希望我做对了你想做的事情。 试试这个小提琴

您可以只.hide()与当前所选内容匹配的选项，并在当前:hidden元素.show()再次显示之前隐藏的选项？

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