平變化上選擇多個

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>