Блог

У меня есть простое поле выбора выпадающего списка с использованием html и js. В настоящее время все элементы в выпадающем списке являются статическими. В другом месте у меня есть таблица, доступная для редактирования пользователем. Я пытаюсь получить текстовые значения всех ячеек с определенным классом, которые будут в раскрывающемся списке.

Вот что у меня есть до сих пор:

  <input type="text" placeholder="Account" id="new_account" onkeyup="filterFunction()" onclick="myFunction()">
  <div id="myDropdown" class="dropdown-content">
    <a id="accselect1" onclick="selectAccount">About</a>
    <a id="accselect2" onclick="selectAccount">Blogg</a>
    <a id="accselect3" onclick="selectAccount">Blog</a>
    <a id="accselect4" onclick="selectAccount">Contact</a>
    <a id="accselect5" onclick="selectAccount">Custom</a>
    <a id="accselect6" onclick="selectAccount">Support</a>
    <a id="accselect7" onclick="selectAccount">Tools</a>
  </div>
  

 function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("new_account");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i  ) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
  

В другом месте на моей странице у меня есть:

 <div class="content" id="acc_list"><table class="acc_table" id="acc_table1">
         <tr id=acc_row1acc_table1><td id="acc_name1" class="accname">Cash</td><td id="acc_balance1" class="accbal">$5322.54</td><td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td></tr>
         <tr id=acc_row2acc_table1><td id="acc_name2" class="accname">Credit Card</td><td id=acc_balance2 class="accbal">$1362.21</td><td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td></tr>
         <tr id=acc_row3acc_table1><td id="acc_name3" class="accname">Checking Account</td><td id=acc_balance3 class="accbal">$4322.50</td><td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td></tr>
         <tr id=acc_row4acc_table1><td id="acc_name4" class="accname">Savings Account</td><td id=acc_balance4 class="accbal">$12322.50</td><td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td></tr>
    </table><div><h4 id="acc">amp;nbsp<button data-modal-target="#modal" class="add_account" id="editaccounts" onclick="sayadd(); accounttablenum('acc_table1')"> </button></h4></div></div>
  

Я пытаюсь получить текст всех td с class .accname для заполнения выпадающего списка.

 document.querySelectorAll(".accname").forEach(element=>{
//get all elements with class .accname and for each of them:

    let dropdown=document.querySelector("#myDropdown");
//get drop-down element

    let options=document.querySelectorAll("#myDropdown > a").length;
//get number of current options

   dropdown.innerHTML =  dropdown.innerHTML   '<a id="accselect' (options 1) '" onclick="selectAccount"> ' element.innerText ' </a>'
// append new option with current id  1 and elements inner text
});
  

оберните все function options (){...}
это, затем вызовите загрузку страницы : options()

Имейте в виду, что вам, вероятно, придется вызывать его и в sayadd() функции, но вы не показали полный код…

Рабочий пример:

 function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("new_account");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i  ) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

function options() {
  document.querySelectorAll(".accname").forEach(element => {
    let dropdown = document.querySelector("#myDropdown");
    let options = document.querySelectorAll("#myDropdown > a").length;
    dropdown.innerHTML = dropdown.innerHTML   '<a id="accselect'   (options   1)   '" onclick="selectAccount"> '   element.innerText   ' </a>'
  });
}
options()  

 <input type="text" placeholder="Account" id="new_account" onkeyup="filterFunction()" onclick="myFunction()">
<div id="myDropdown" class="dropdown-content">
  <a id="accselect1" onclick="selectAccount">About</a>
  <a id="accselect2" onclick="selectAccount">Blogg</a>
  <a id="accselect3" onclick="selectAccount">Blog</a>
  <a id="accselect4" onclick="selectAccount">Contact</a>
  <a id="accselect5" onclick="selectAccount">Custom</a>
  <a id="accselect6" onclick="selectAccount">Support</a>
  <a id="accselect7" onclick="selectAccount">Tools</a>
</div>
<div class="content" id="acc_list">
  <table class="acc_table" id="acc_table1">
    <tr id=acc_row1acc_table1>
      <td id="acc_name1" class="accname">Cash</td>
      <td id="acc_balance1" class="accbal">$5322.54</td>
      <td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td>
    </tr>
    <tr id=acc_row2acc_table1>
      <td id="acc_name2" class="accname">Credit Card</td>
      <td id=acc_balance2 class="accbal">$1362.21</td>
      <td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td>
    </tr>
    <tr id=acc_row3acc_table1>
      <td id="acc_name3" class="accname">Checking Account</td>
      <td id=acc_balance3 class="accbal">$4322.50</td>
      <td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td>
    </tr>
    <tr id=acc_row4acc_table1>
      <td id="acc_name4" class="accname">Savings Account</td>
      <td id=acc_balance4 class="accbal">$12322.50</td>
      <td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td>
    </tr>
  </table>
  <div>
    <h4 id="acc">amp;nbsp<button data-modal-target="#modal" class="add_account" id="editaccounts" onclick="sayadd(); accounttablenum('acc_table1')"> </button></h4>
  </div>
</div>