[英]Javascript not working with onchange event of multi select dropdownlist in asp.net MVC
我在 ASP.NET MVC 視圖中有以下 Razor 代碼
<div id="rolesValues" class="case-assignment-hide">
@Html.DropDownList("ddlRoleValues", new SelectList(@Model.Roles, "Key", "Value"), new {@id= "ddlRoleValues", @class = "form-control case-assignment-rule-use-values", multiple = "multiple" })
<span class="field-validation-valid help-block" data-valmsg-replace="true"></span>
</div>
下面是我的 javascript 來捕捉上面dropdownlist
更改事件,我把它放在$(document).ready(function ()
$("#ddlRoleValues").on("change", function () {
alert('I got the hit');
});
我注意到,只要dropdownlist
項的選擇發生變化,就不會觸發此事件。
下面是瀏覽器中呈現的 HTML
<div class="col-sm-4 case-assignment-rule-value-selection">
<div class="select2-container select2-container-multi form-control case-assignment-rule-values" id="s2id_ddlRoleValues">
<ul class="select2-choices">
<li class="select2-search-choice">
<div>Manager</div>
<a href="#" onclick="return false;" class="select2-search-choice-close" tabindex="-1"></a>
</li>
<li class="select2-search-field">
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen1" style="width: 34px;">
</li>
</ul>
</div>
<select class="form-control case-assignment-rule-values select2-offscreen" id="CaseAssignmentRules[0].RuleValues" multiple="multiple" name="CaseAssignmentRules[0].RuleValues" tabindex="-1" data-val="true" data-val-required="This field is required.">
<option value="aae">Manager</option>
<option value="aad">Manager Supervisor</option>
<option value="ab1">Accommodations Manager</option>
<option value="ab0">Service Representative</option>
<option value="84d">demo</option>
<option value="ab2">Employee</option>
<option value="ab4">Human Resource</option>
<option value="aaf">Case Manager</option>
<option value="ab3">Supervisor</option>
</select>
<span class="field-validation-valid help-block" data-valmsg-replace="true" data-valmsg-for="CaseAssignmentRules[0].RuleValues"></span>
</div>
我錯過了什么嗎??
// Try using the class instead of id
$(document).on("change", ".case-assignment-rule-values", function () {
alert('I got the hit');
});
正如 Erik Philip 所說,我的代碼確實會生成自動 ID,但我們可以在類而不是 Id 上應用事件。 這是我如何實現的。 我在$(document).ready(function ()
$(this).parent().siblings('.case-assignment-rule-value-selection').find('select.case-assignment-rule-values').select2().on("change", function () {
listToFilter(this);
);
var listToFilter = function (e) {
var selectedLength = $(e).select2('data');
}
將事件傳遞給function
,它工作正常。
您的 MVC 代碼:
<div id="rolesValues" class="case-assignment-hide">
@Html.DropDownList("ddlRoleValues", new SelectList(@Model.Roles, "Key", "Value"), new {@id= "ddlRoleValues", @class = "form-control case-assignment-rule-use-values", multiple = "multiple" })
<span class="field-validation-valid help-block" data-valmsg-replace="true"></span>
</div>
應該產生 2 個元素,id 為rolesValues
和ddlRoleValues
。 但是,在您生成的 HTML 中找不到這些 ID。
因此,根據此信息,您的問題無法回答,因為沒有多少代碼能夠選擇這些元素中的任何一個,因為它們不存在。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.