javascript - 将下拉列表中的值添加到表 javascript

Question

每当用户单击下拉列表中的值时，我都想创建一个包含其中值的表。当您取消选中该复选框时，它应该从表格中消失。我遇到的问题是，它不断附加选择，如下所示:

它应该是这样的:

这是我的 asp 代码。我还想通过 ID 来定位特定的表。因为我在此页面中有大约 20 个下拉菜单。

<asp:ListBox ID="ddlRolePosition" AutoPostBack="false" runat="server"
     SelectionMode="Multiple" class="selectpicker show-tick form-control show-tick"
     multiple data-validation-event="change" style="display: none;">
</asp:ListBox> 

<table>
  <tbody>
  </tbody>
</table>

$("[id$=ddlRolePosition]").change(function() {
  if (!$("[id$=ddlRolePosition]").val()) {

  }
  else {
    var markup = "<tr><td>" + $("[id$=ddlRolePosition]").val() + "</td></tr>";
    $("table tbody").append(markup);
  }
});

Answer 1

你可以:

1. 封装 select 和 table 元素，以便您可以在单个页面上访问多个元素
2. 通过 select.selectedOptions 获取所选选项
3. 添加了一个模仿 jQuery.fn.empty 的 empty() 方法
4. 添加了一个模仿 jQuery.fn.trigger 的 triggerEvent() 方法

// Add event listeners
Array.from(document.querySelectorAll('.preview-combo select')).forEach(combo => {
  combo.addEventListener('change', onComboChange);
});

// Pre-select some options...
let combo = document.querySelectorAll('.preview-combo select');
combo[0].options[0].selected = true; // First combo, first option
combo[0].options[1].selected = true; // First combo, second option
combo[1].options[1].selected = true; // Second combo, second option
combo[1].options[2].selected = true; // Second combo, third option

// Fire change events (for initial loading only)
Array.from(combo).forEach(combo => triggerEvent(combo, 'change'))

function onComboChange(e) {
  let select = e.target, table = select.parentElement.querySelector('table'),
      values = Array.from(select.selectedOptions).map(opt => opt.value);
  appendRows(table, values);
}
function appendRows(table, values) {
  let tbody = empty(table.querySelector('tbody'));
  values.forEach((value) => {
    let tr = document.createElement('tr'), td = document.createElement('td');
    td.textContent = value; tr.appendChild(td); tbody.appendChild(tr);
  });
  return table;
}
function triggerEvent(el, eventName) {
  var event = document.createEvent('HTMLEvents');
  event.initEvent(eventName, true, false);
  el.dispatchEvent(event);
  return el;
}
function empty(el) {
  var range = document.createRange();
  range.selectNodeContents(el);
  range.deleteContents();
  return el;
}

.preview-combo {
  display: inline-block;
}

.preview-combo select {
  width: 100px;
}

<div class="preview-combo">
  <select multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <table class="selected-values">
    <tbody><tr><td><em>Results</em></td></tr></tbody>
  </table>
</div>

<div class="preview-combo">
  <select multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <table class="selected-values">
    <tbody><tr><td><em>Results</em></td></tr></tbody>
  </table>
</div>

<小时/>

jQuery + Bootstrap

这是一个使用 jQuery 的示例。

(($) => {
  $.fn.selectedValues = function() {
    return this.find('option:selected').map((i, opt) => opt.value).get();
  };
})(jQuery);

$('select').selectpicker(); // Convert to a picker.

// Add event listeners
$('.preview-combo select').on('change', onComboChange);

// Pre-select some options...
let $combo = $('.preview-combo select');
$combo.get(0).options[0].selected = true; // First combo, first option
$combo.get(0).options[1].selected = true; // First combo, second option
$combo.get(1).options[1].selected = true; // Second combo, second option
$combo.get(1).options[2].selected = true; // Second combo, third option

// Fire change events (for initial loading only)
$('.preview-combo select').trigger('change');

function onComboChange(e) {
  let $sel = $(e.target);
  populateTable($sel.closest('.preview-combo').find('table'), $sel.selectedValues());
}
function populateTable($table, values) {
  return $table.find('tbody').empty().append(values.map(value => {
    return $('<tr>').append($('<td>').text(value));
  }));
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm">
      <div class="preview-combo">
        <select multiple class="form-control">
          <option value="1">Audit Assistant</option>
          <option value="2">Audit Expert</option>
          <option value="3">Auditor</option>
        </select>
        <table class="selected-values">
          <tbody><tr><td><em>Results</em></td></tr></tbody>
        </table>
      </div>
    </div>
    <div class="col-sm">
      <div class="preview-combo">
        <select multiple class="form-control">
          <option value="1">Audit Assistant</option>
          <option value="2">Audit Expert</option>
          <option value="3">Auditor</option>
        </select>
        <table class="selected-values">
          <tbody><tr><td><em>Results</em></td></tr></tbody>
        </table>
      </div>
    </div>
  </div>
</div>