如何重置级联 select 列表？

Question

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

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

    submitQuery();     
};

它重置 select 列表，但是因为 select 列表是级联的，所以一个依赖另一个用正确的值填充 select 列表，它设置值当时 select 编辑为默认值的列表。

所以在我的例子中，我有三个 select 列表，一个用于 table 名称，一个用于字段名称，一个用于属性。当我 select a table 它给我匹配的列名和属性。如果我按下重置按钮，它会将 table 名称重置为默认值，但字段名和属性 select 列表会设置为其他 table 的默认值。

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

这是我的表单，其中包含 select 列表和重置按钮；

 <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

function resetSearch(advancedSearch){

对此进行更改：

function resetSearch(){

Answer 2

我已经根据您最初的 HTML 创建了这个 Codepen，并描述了这个具有层叠字段的 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");
});

Answer 3

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

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

澄清一下：reset 如何 'know' 'table 1' 正确的字段列表是 'field1' 和 'field2' 以及 'table 2'是 '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>

如何重置级联 select 列表？

How to reset cascading select lists?

javascript

jquery

reset

selectlist