平变化上选择多个

Question

我有一个选择，用户可以选择多种选择：

<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" > 
    <option value="1">name1</option> 
    <option value="2">name2</option> 
    //... 
</select> 

与Symfony的的形式产生。

我想要一个事件，当用户在select中选择一个选项。

所以，我想：

<script type="text/javascript"> 
    $(function() { 
     var $zone = $('#mybundle_evenement_name'); 
     $zone.onclick(function() { 
      alert('test'); 
     }); 
    }); 
</script> 



<script type="text/javascript"> 
    var $zone = $('#mybundle_evenement_name'); 
    $zone.onclick(function() { 
     alert('test'); 
    }); 
</script> 

我也试图与onchange()而不是onclick()。

而且什么也没有发生......

Answer 1

注册事件处理程序文件ready功能。它在页面加载后调用。你也有事件处理函数名称的错误，使用它没有on：.change(,.click(。

$(document).ready(function() { 
    $('#mybundle_evenement_name').change(function() { 
     alert('test'); 
    }); 
}); 

Answer 2

先给选择的onchange行为在HTML中，像这样：

<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" onchange="alertMe()" > 
    <option value="1">name1</option> 
    <option value="2">name2</option> 
    //... 
</select> 

然后：

<script> 
    function alertMe(){ 
     alert('test'); 
    } 
</script> 

此外，还要确保你包括jQuery的所有脚本前，并且没有指定type="text/javascript"，因为它没有必要，我也不完全确定，但实际上它可能是问题的根源。

事实上，所有从之前可以缩短为：

<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" onchange="alert('test');" > 
 
     <option value="1">name1</option> 
 
     <option value="2">name2</option> 
 
     //... 
 
    </select>

而且它的工作是肯定的。

Answer 3

你的change事件应该用全局的function包装在jquery中。

$(function(){ 
 
    $('#mybundle_evenement_name').change(function(){ 
 
    alert("you selected : "+this.value); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" > 
 
    <option value="1">name1</option> 
 
    <option value="2">name2</option> 
 
    
 
</select>

Answer 4

参见本：https://api.jquery.com/change/

它应该是改变，而不是的onChange。所以，你的代码应该是：

$(function(){ 
 
    $('#mybundle_evenement_name').change(function(){ 
 
    alert('test'); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" > 
 
    <option value="1">name1</option> 
 
    <option value="2">name2</option> 
 
    
 
</select>

Answer 5

这是为我工作。你可以使用相同的。

$("#MultiSelect_DefaultValues").change(function() { 
    console.log($(this).val()); 
    $('#test').html($(this).val()); 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select id="MultiSelect_DefaultValues" multiple> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
</select> 
<div id="test"> 
</div> 

为参考：https://jsfiddle.net/s5hoxybz/1/

Answer 6

 $(document).on("change", "#mybundle_evenement_name", function() { 
      //... 
     }); 

做的工作。不知道为什么其他解决方案不起作用...

Answer 7

$(document).ready(function(){ 
 
$("#mybundle_evenement_name").change(function(){ 
 
$(this).html(alert('test'+ this.value)); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="mybundle_evenement_name" class="form-control" name="mybundle_evenement[name][]" required="required" multiple="multiple" > 
 
    <option value="1">name1</option> 
 
    <option value="2">name2</option> 
 
    //... 
 
</select>