如何使用JavaScript防止HTML元素选择选项中的冲突
[英]How to prevent conflict in HTML element select options using Javascript
问题描述
I have the following HTML: 
我有以下HTML：
<html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://gregpike.net/demos/bootstrap-file-input/bootstrap.file-input.js"></script> <meta charset="utf-8"> </head> <body> <form id="id-method1Form" class="form-horizontal" method="post" > <input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' /> <div id="div_id_clustering_method_param" class="form-group"> <label for="id_clustering_method_param" class="control-label col-lg-2"> Clustering method </label> <div class="controls col-lg-8"> <select class="select form-control" id="id_clustering_method_param" name="clustering_method_param"> <option value="complete">Complete linkage</option> <option value="average">Average linkage</option> <option value="ward" selected="selected">Ward</option> </select> </div> </div> <div id="div_id_distance_method_param" class="form-group"> <label for="id_distance_method_param" class="control-label col-lg-2"> Distance measure </label> <div class="controls col-lg-8"> <select class="select form-control" id="id_distance_method_param" name="distance_method_param"> <option value="euclidean" selected="selected">Euclidean</option> <option value="manhattan">Manhattan</option> <option value="pearsond">Pearson Correlation</option> </select> </div> </div> <div class="form-group"> <div class="aab controls col-lg-2"></div> <div class="controls col-lg-8"> <input type="submit" name="submit" value="Submit" class="btn btn-primary" id="submit-id-submit" /> </div> </div> </form> <!--- END FORM DISPLAY--> </body> <html>
What I want to do is to set the condition. 我要做的是设置条件。 Namely the clustering method ward can only be applied with distance measure euclidean . 即聚类方法ward只能与测距euclidean 。 If the user pass all other distance measure to ward it should return error message. 如果用户通过所有其他距离度量值来保护ward ，则应返回错误消息。
How can I do it using JavaScript? 如何使用JavaScript？
1 个解决方案
解决方案1
1 已采纳 2015-10-01 02:51:59
To disable some of the menu options based on which option is selected, you can hook into the "on change" event for the first select element. 要基于选定的选项禁用某些菜单选项，您可以针对第一个选择元素加入“ on change”事件。 Every time the first select element is changed, a bit of JavaScript then determines which options should be available in the second menu. 每次更改第一个选择元素时，然后会使用一点JavaScript确定第二个菜单中应提供哪些选项。
The following code uses an if-else block to show the general idea of how you can enable/disable the option elements in the second box. 以下代码使用if-else块显示了如何启用/禁用第二个框中的option元素的一般思想。 To make this solution more elegant, I would use a JavaScript object to keep track of which options in the second menu should be available when a certain option is selected in the first select element. 为了使该解决方案更加美观，我将使用JavaScript对象来跟踪在第一个select元素中选择某个选项后，第二个菜单中的哪些选项应该可用。 Then whenever the first element is changed you can do a lookup and set the options in the second menu to be enabled or disabled as needed. 然后，无论何时更改第一个元素，您都可以进行查找并根据需要将第二个菜单中的选项设置为启用或禁用。
Live Demo: 现场演示：
var method = $("#id_clustering_method_param"); var dist = $("#id_distance_method_param"); function refreshOptions() { // The following can be refactored to use a // lookup instead if more option rules are needed. if (method.find(':selected').text() === "Ward") { dist.find("option[value='manhattan']").attr("disabled", true); dist.find("option[value='pearsond']").prop("disabled", true); } else { dist.find("option").prop("disabled", false) }; } refreshOptions(); method.on("change", refreshOptions);
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <meta charset="utf-8"> </head> <body> <form id="id-method1Form" class="form-horizontal" method="post"> <input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' /> <div id="div_id_clustering_method_param" class="form-group"> <label for="id_clustering_method_param" class="control-label col-lg-2"> Clustering method </label> <div class="controls col-lg-8"> <select class="select form-control" id="id_clustering_method_param" name="clustering_method_param"> <option value="complete">Complete linkage</option> <option value="average">Average linkage</option> <option value="ward" selected="selected">Ward</option> </select> </div> </div> <div id="div_id_distance_method_param" class="form-group"> <label for="id_distance_method_param" class="control-label col-lg-2"> Distance measure </label> <div class="controls col-lg-8"> <select class="select form-control" id="id_distance_method_param" name="distance_method_param"> <option value="euclidean" selected="selected">Euclidean</option> <option value="manhattan">Manhattan</option> <option value="pearsond">Pearson Correlation</option> </select> </div> </div> <div class="form-group"> <div class="aab controls col-lg-2"></div> <div class="controls col-lg-8"> <input type="submit" name="submit" value="Submit" class="btn btn-primary" id="submit-id-submit" /> </div> </div> </form> <!--- END FORM DISPLAY--> </body> <html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.