How to prevent conflict in HTML element select options using Javascript
Question
I have the following 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 . If the user pass all other distance measure to ward it should return error message.
How can I do it using JavaScript?
1 answers
solution1
1 ACCPTED 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. Every time the first select element is changed, a bit of JavaScript then determines which options should be available in the second menu.
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. 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. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.