javascript MVC 下拉列表 onchange 调用 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14317518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC dropdownlist onchange call jquery
提问by MartinS
I have a SelectListrepresenting a delivery type for an order.
我有一个SelectList代表订单的交货类型。
The delivery type reference data has the usual code/description, but also an additional boolean property which indicates if further information needs to be entered for the type selected.
交付类型参考数据具有通常的代码/描述，但还有一个额外的布尔属性，用于指示是否需要为所选类型输入更多信息。
So for Emergency deliveries additional data is required. The additional data entry fields would be set visible if Emergency was selected, otherwise hidden
因此，对于紧急交付，需要额外的数据。如果选择了“紧急”，则附加数据输入字段将设置为可见，否则将隐藏
My ViewModelcontains <List>ReferenceDeliveryTypeswhich contains the 3 properties.
I have created a SelectListItemsfrom the ViewModel data
我的ViewModel包含<List>ReferenceDeliveryTypes其中包含 3 个属性。我SelectListItems从 ViewModel 数据创建了一个
@Html.DropDownListFor(model => model.DeliveryTypeCode,
new SelectList(Model.ReferenceDeliveryTypes as System.Collections.IEnumerable,
"DeliveryTypeCode", "DeliveryTypeDescription"), new { id = "ddlDeliveryType" })
How can I call a jQuery function on change of the delivery type, pass the selected code and check the Model.ReferenceDeliveryTypesfor that code to see if the additional data property is true/false to show/hide the additional fields div?
如何在更改交付类型时调用 jQuery 函数，传递所选代码并检查该Model.ReferenceDeliveryTypes代码以查看附加数据属性是否为真/假以显示/隐藏附加字段div？
I have managed to get the jQuery function called to pass the value.
我设法调用了 jQuery 函数来传递值。
$(function () {
$('#ddlDeliveryType').change(function () {
var value = $(this).val();
alert(value);
});
});
});
采纳答案by Peter Smith
I don't know of any way you can do this using a select list but I suggest the following options:
我不知道有什么方法可以使用选择列表执行此操作，但我建议使用以下选项：
- Simple but a hack - add a string to the end of DeliveryTypeDescription, for example (emergency delivery)and check for that in your change function
- Another hack - multiply DeliveryTypeCode by 10 and add 1 on if it's an emergency delivery (and then use mod 10 in your change function)
- Use an Ajax lookup function
- Load a JavaScript lookup table with the codes which require an emergency delivery
- Use a hidden field in your form which contains a string list of the emergency codes with a suitable separator
- 简单但有技巧的 - 在 DeliveryTypeDescription 的末尾添加一个字符串，例如（紧急交付）并在您的更改功能中检查它
- 另一个技巧 - 将 DeliveryTypeCode 乘以 10，如果是紧急交付则加 1（然后在您的更改功能中使用 mod 10）
- 使用 Ajax 查找功能
- 使用需要紧急交付的代码加载 JavaScript 查找表
- 在表单中使用隐藏字段，其中包含带有合适分隔符的紧急代码字符串列表
Good luck
祝你好运
UPDATE
For the hidden field option if you use something like 123|456|789|and then use indexOfhaving appended a |to the selected ID.
UPDATE 对于隐藏字段选项，如果您使用类似的内容123|456|789|，然后使用indexOf将 a 附加|到所选 ID。
回答by MartinS
I converted the Model.ReferenceDeliveryTypes to a JSON list which allowed me to access it from the jQuery.
我将 Model.ReferenceDeliveryTypes 转换为允许我从 jQuery 访问它的 JSON 列表。
Possibly not the best way, but it allows me to do everything on the client rather than making an AJAX call back. I can now show/hide the inside the if block.
可能不是最好的方法，但它允许我在客户端上做所有事情，而不是进行 AJAX 回调。我现在可以显示/隐藏 if 块的内部。
Thought it worth documenting what I did as I've not come across the @Html.Raw(Json.Encodebefore and it might prove useful for someone who wants to access model data from within jQuery.
认为值得记录我所做的事情，因为我以前没有遇到过@Html.Raw(Json.Encode，它可能对想要从 jQuery 访问模型数据的人有用。
Any additional comments welcome.
欢迎任何补充意见。
<script type="text/javascript">
var [email protected](Json.Encode(Model.ReferenceDeliveryTypes))
</script>
@Html.DropDownListFor(model => model.DeliveryTypeCode,
new SelectList(Model.ReferenceDeliveryTypes.ReferenceDeliveryType as System.Collections.IEnumerable,
"DeliveryTypeCode", "DeliveryTypeDescription"), new { id = "ddlDeliveryType" })
$(function () {
$('#ddlDeliveryType').change(function () {
var selectedDT= $(this).val();
$.each(ReferenceDeliveryTypeJsonList, function (index, item) {
if (selectedDT === item.DeliveryTypeCode) {
alert("match " + selectedDT);
}
});
});
});
