Question

我有三个级联选择列表。当我尝试使用此代码重置它们时：

function resetSearch(advancedSearch){
    document.getElementById("advancedSearch").reset();

    submitQuery();     
};

它重置选择列表，但由于选择列表是级联的，因此一个依赖于另一个用正确的值填充选择列表，它将当时选择的列表的值设置为默认值。

所以在我的情况下，我有三个选择列表，一个用于表名，一个用于字段名，一个用于属性。当我选择一个表时，它会给我匹配的列名和属性。如果我按下重置按钮，它会将表名重置为默认值，但字段名和属性选择列表将设置为另一个表的默认值。

这是一张图片来澄清我的问题：

这是我的表单，其中包含选择列表和重置按钮;

 <form action="javascript:submitQuery()" id="advancedSearch">    
                                    <!-- Search by name input field -->
                                      <div class="form-group">
                                        <div id= "selectListContent">
                                            <div class="row">
                                                <div id="content-a">
                                                    <div class='content-row'>
                                                        <div class="select_table col-md-6">
                                                            <label for="invoerTabelNaam">Select table:</label>
                                                            <span>
                                                                <select class="form-control" name="table_names" id="slctTable">  
                                                                </select>
                                                            </span>    
                                                        </div>
                                                        <div class="select_column col-md-6">
                                                            <label for="invoerColumnNaam">Select column:</label>
                                                            <span>
                                                                <select class="form-control" name="column_names" id="slctField">
                                                                </select>
                                                            </span>    
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="select_attribute col-md-9">
                                                    <label for="invoerAttribuutNaam">Select attribute:</label>
                                                    <span>
                                                        <select class="form-control" name="attribute_names" id="slctAttribute">  
                                                        </select>
                                                    </span>    
                                                </div> 
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Buttons search en reset voor tab advanced search -->
                                    <div class="form-group">
                                            <div class="col-md-6">
                                                <button type="reset" class="btn btn-block btn-primary" onclick="resetSearch()">
                                                 <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> &nbsp Reset
                                                </button>
                                            </div>
                                    </div>
</div>

Answer 1

我认为当选择第一个selects中的值时，您会有一些事件填充其他select。在这种情况下，您需要在重置表单后触发它。例如：

function resetSearch() {
  $('#slctTable').closest('form')[0].reset();
  $('#slctTable').trigger('change');
}

澄清：reset如何'知道'对于'表1'，正确的字段列表是'field1'和'field2'，对于'table2'，它是'other1'和'other2'？它可以将选择设置为列表的第一项。

var data = {
  'table1': {
    'tab1_column1': ['tab1_col1_attr_1', 'tab1_col1_attr_2'],
    'tab1_column2': ['tab1_col2_attr_1', 'tab1_col2_attr_2']
  },
  'table2': {
    'tab2_column1': ['tab2_col1_attr_1', 'tab2_col1_attr_2'],
    'tab2_column2': ['tab2_col2_attr_1', 'tab2_col2_attr_2']
  }
}

function resetSearch() {

  $('#slctTable').closest('form')[0].reset();
  $('#slctTable').trigger('change');
}

$(function() {
  var table = $('#slctTable'),
    field = $('#slctField'),
    attr = $('#slctAttribute');

  table.on('change', function() {
    field.html('').val('');
    $.each(data[$(this).val()], function(k, v) {
      field.append($("<option />").val(k).text(k))
    });
    field.trigger('change');
  });
  field.on('change', function() {
    attr.html('').val('');
    $.each(data[table.val()][$(this).val()], function(k, v) {
      attr.append($("<option />").val(v).text(v))
    });
  });
  $.each(data, function(k, val) {
    table.append($("<option />").val(k).text(k))
  });
  //populate fields for the first time
  table.trigger('change');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:submitQuery()" id="advancedSearch">
  <!-- Search by name input field -->
  <div class="form-group">
    <div id="selectListContent">
      <div class="row">
        <div id="content-a">
          <div class='content-row'>
            <div class="select_table col-md-6">
              <label for="invoerTabelNaam">Select table:</label>
              <span>
                                                                <select class="form-control" name="table_names" id="slctTable">  
                                                                </select>
                                                            </span>
            </div>
            <div class="select_column col-md-6">
              <label for="invoerColumnNaam">Select column:</label>
              <span>
                                                                <select class="form-control" name="column_names" id="slctField">
                                                                </select>
                                                            </span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="select_attribute col-md-9">
          <label for="invoerAttribuutNaam">Select attribute:</label>
          <span>
                                                        <select class="form-control" name="attribute_names" id="slctAttribute">  
                                                        </select>
                                                    </span>
        </div>
      </div>
    </div>
  </div>
  <!-- Buttons search en reset voor tab advanced search -->
  <div class="form-group">
    <div class="col-md-6">
      <button type="reset" class="btn btn-block btn-primary" onclick="resetSearch()">
        <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> &nbsp Reset
      </button>
    </div>
  </div>

Answer 2

function resetSearch(advancedSearch){

为此改变：

function resetSearch(){

Answer 3

我已根据您的初始HTML和描述创建此Codepen，具有级联字段。我没有看到你的问题。你能提供更多的解释，或者说这是否可以解决你的问题？

Codepen：http://codepen.io/anon/pen/ezmErd

HTML 的

<form class="container" action="javascript:submitQuery()" id="advancedSearch">
  <div class="form-group">

    <div id="selectListContent">
      <div class="row">
        <div id="content-a">
          <div class='content-row'>
            <div class="select_table col-md-6">
              <label for="invoerTabelNaam">Select table:</label>
              <span>
               <select class="form-control" name="table_names" id="slctTable">
                </select>
              </span>
            </div>
            <div class="select_column col-md-6">
              <label for="invoerColumnNaam">Select column:</label>
              <span>
                <select class="form-control" name="column_names" id="slctField">
                </select>
               </span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="select_attribute col-md-9">
          <label for="invoerAttribuutNaam">Select attribute:</label>
          <span>
              <select class="form-control" name="attribute_names" id="slctAttribute">
              </select>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-3">
      <button type="reset" class="btn btn-block btn-primary" onclick="resetSearch('advancedSearch')">
       <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> &nbsp Reset
      </button>
    </div>
  </div>
</form>

JS

var table = document.getElementById("slctTable"),
  field = document.getElementById("slctField"),
  attrib = document.getElementById("slctAttribute"),
  populate = function (dropdown, name) {
    for (var i = 0, temp; i < 4; i++) {
      temp = document.createElement("option")
      temp.value = i + 1;
      temp.textContent = name + " " + +(i + 1);
      dropdown.appendChild(temp);
    }
  },
  submitQuery = function () {
    console.log("Submit !");
  },
  resetSearch = function (advancedSearch) {
    document.getElementById(advancedSearch).reset();
    submitQuery();
  };

// Populate dynamicly the first Dropdown.
populate(table, "Table");

// When you select an item of first Dropdown...
table.addEventListener("change", function() {
  field.innerHTML = "";
  // ...populate dynamicly the second Dropdown.
  populate(field, "Field");
});

// When you select an item of second Dropdown...
field.addEventListener("change", function() {
  attrib.innerHTML = "";
  // ...populate dynamicly the last Dropdown.
  populate(attrib, "Attribute");
});

如何重置级联选择列表？

3 个答案: