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

要根据选择的选项禁用某些菜单选项，您可以加入＆＃34;更改＆＃34;第一个选择元素的事件。每次更改第一个选择元素时，一些JavaScript就会确定第二个菜单中应该有哪些选项。

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

现场演示：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

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

1 个答案: