Sergiu's questions

我正在尝试从<select id="past"></select>. 不幸的是，它对我不起作用，我尝试了很多方法，但都是徒劳的，因为我不太了解 javascript。但Inspect Element一切都显示得很好。

我需要以<select id="past"></select>与Inspect Element.

我尝试了以下方法：（ps：在我看来，这里的数据显示不好，我在上面复制了一份codepen.io）

COD HTML/JS

let elements = document.querySelectorAll('p');
for (var i = 0; i < elements.length; i++) {
  document.getElementById("past").innerHTML = `<option>` + elements.[i].textContent + `</option>`;
  console.log(elements[i].textContent);
}

<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<hr>
<select id="past"></select>

然后我尝试这样：codepen.io

COD HTML/JS

let elements = document.querySelectorAll("p");
for (let elem of elements) {
  document.getElementById("past").innerHTML =
    `<option>` + elem.innerHTML + `</option>`;
}

<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<hr>
<select id="past"></select>

我不知道如何显示所有数据，只显示最后一个选项。

我到处寻找这个解决方案，但找不到可以帮助我的答案。我的标签是用数据库中的 ajax 以这种方式呈现的代码：

function all() {
    // Ajax config
    $.ajax({
        type: "GET", //we are using GET method to get all record from the server
        url: 'all.php', // get the route value
        success: function (response) {//once the request successfully process to the server side it will return result here
            
            // Parse the json result
            response = JSON.parse(response);

            var html = "";
            // Check if there is available records
            if(response.length) {
                html += '<div class="list-group">';
                // Loop the parsed JSON
                $.each(response, function(key,value) {
                    // Our employee list template
                    html += '<a href="#" class="list-group-item list-group-item-action">'; 
                    html += "<p class='m-0'>" + value.let_txt_3 + "</p>";
                    html += "<p class='m-0'>" + value.let_txt_4 + "</p>";
                    html += "<p class='m-0'>" + value.let_txt_5 + "</p>";  
                    html += "<p class='m-0'>" + value.let_txt_6 + "</p>";  
                    html += "<button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#edit-employee-modal' id='edit_employee_modal' data-bs-id='"+value.id+"'>Edit</button>";
                    html += '</a>';
                });
                html += '</div>';
            } else {
                html += '<div class="alert alert-warning">';
                  html += 'No records found!';
                html += '</div>';
            }

            

            // Insert the HTML Template and display all employee records
            $("#employees-list").html(html);
        }
    });
}

我想操作 html 按钮，但我不能。

html += "<button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#edit-employee-modal' id='edit_employee_modal' data-bs-id='"+value.id+"'>Edit</button>";

例如，帮助我执行以下操作：

• 当您按下按钮显示alert("test");
• 或者edit_employee_modal.style.color = "red";

我的问题是我不知道这个错误，inspect-> console（点击按钮）：

modal.js:332 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at De._isAnimated (modal.js:332:26)
at De._initializeBackDrop (modal.js:205:24)
at new De (modal.js:82:27)
at De.getOrCreateInstance (base-component.js:55:41)
at HTMLButtonElement.<anonymous> (modal.js:434:22)
at HTMLDocument.n (event-handler.js:120:21)

我试过什么？！

let edit_employee_modal = document.querySelector("#edit_employee_modal");
edit_employee_modal.onclick = function() {
    edit_employee_modal.style.color = "red"; 
}

页面加载后尝试执行脚本：

window.document.onload = function(e){ 
let edit_employee_modal = document.querySelector("#edit_employee_modal");
    edit_employee_modal.onclick = function() {
        edit_employee_modal.style.color = "red"; 
    }
}

我用下面的代码替换了它，它也不起作用（因为我认为 javascript 无法读取我的标签）：

window.onload = function(e){ 
   //code 
}
document.addEventListener("DOMContentLoaded", function(event) { 
  // code 
});

你能帮我出主意吗？

ps：我是新手，不要评价太苛刻

大家好，不久前我开始学习 JavaScript，遇到了一个难题。在我的 JS 脚本中，我将选择的值发送到类.selected_index_value到目前为止还不错的段落，但现在任务不同了，不是仅将值发送到第一个找到的段落，而是发送到页面上存在的所有相同的段落ID。如果您有任何想法如何做到这一点，请帮助我。

我的代码和所有经过测试的选项：

1. getElementsByClassName

   document.getElementById('item1').onchange = function(){ 
       document.getElementsByClassName('selected_index_value')[0].innerHTML = this.options[this.selectedIndex].innerHTML; 
   }

   <select id="item1" name="Item 1">
         <option></option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
       </select>
   <p class="selected_index_value"></p>
   <p class="selected_index_value"></p>

2.querySelector

document.getElementById('item1').onchange = function(){
    document.querySelector(".selected_index_value").innerHTML = this.options[this.selectedIndex].innerHTML;        
}

<select id="item1" name="Item 1">
      <option></option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
<p class="selected_index_value"></p>
<p class="selected_index_value"></p>

到目前为止，这是唯一的方法，但是我没有尝试过document.getElementById()，否则我知道它不会起作用，即使我删除上面的索引0 getElementsByClassName()[0]，它也不起作用。

该片段也托管在 codepen Codepen.com上