如何使用JavaScript防止HTML元素选择选项中的冲突

Question

我有以下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>

我要做的是设置条件。 即聚类方法ward只能与测距euclidean 。 如果用户通过所有其他距离度量值来保护ward ，则应返回错误消息。

如何使用JavaScript？

Answer 1

要基于选定的选项禁用某些菜单选项，您可以针对第一个选择元素加入“ on change”事件。 每次更改第一个选择元素时，然后会使用一点JavaScript确定第二个菜单中应提供哪些选项。

以下代码使用if-else块显示了如何启用/禁用第二个框中的option元素的一般思想。 为了使该解决方案更加美观，我将使用JavaScript对象来跟踪在第一个select元素中选择某个选项后，第二个菜单中的哪些选项应该可用。 然后，无论何时更改第一个元素，您都可以进行查找并根据需要将第二个菜单中的选项设置为启用或禁用。

现场演示：

 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>

如何使用JavaScript防止HTML元素选择选项中的冲突

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-01 02:51:59

如何使用JavaScript防止HTML元素选择选项中的冲突

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-01 02:51:59

解决方案1
1 已采纳 2015-10-01 02:51:59