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

How to prevent conflict in HTML element select options using Javascript

本文关键字：选项 冲突 选择 元素 何使用 Javascript 防止 HTML      更新时间：2023-09-26

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

要基于所选择的选项禁用某些菜单选项，您可以挂钩到第一个选择元素的"on change"事件。每当第一个select元素被更改时，一些JavaScript代码就会决定第二个菜单中应该使用哪些选项。

下面的代码使用if-else块来展示如何启用/禁用第二个框中的选项元素的总体思路。为了使这个解决方案更加优雅，我将使用一个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>

相关文章：