我正在做一個允許用戶將新組添加到現有組的網站。在現有的組中它已經有三個固定的組It, cleaning, accountant，所以我的想法是讓用戶通過點擊添加組名submit，他們的輸入欄位將被發送到空的<p>標簽（例如：護士，醫生......等區分哪個昏迷,）。除此之外，在我能夠獲得現有的和新添加的組之后，我需要將完整的組動態添加到下拉串列中。(eg: It, cleaning, accountant, nurse, doctor).
我知道 stackoverflow 不是代碼撰寫服務，但我在發布這個問題之前確實做了自己的研究，但我找不到任何有用的資源。所以任何愿意指導我的人都會非常感激。提前致謝
當前模板：
預期輸出：
完整代碼：
<!DOCTYPE html>
<html>
<body>
<h1>Existing Group</h1>
<p>IT, Cleaning, Accountant</p>
<h1>Add New Group</h1>
<p></p>
<input type="tel" id="group" name="group" placeholder="enter group name">
<br><br>
<button type="button" class="btn btn-primary btn-sm">Submit</button>
<h1>Drop Down List</h1>
<label for="group">Choose a group:</label>
<select name="group" id="group">
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</body>
</html>
uj5u.com熱心網友回復：
在這種情況下，您將需要根據您的要求使用一些 javascript 來添加額外的節點，如下所示：
純JS：
var result = document.getElementById("group");
var tag = document.createElement("option");
tag.setAttribute("value",result.value)
var text = document.createTextNode(result.value);
tag.appendChild(text);
var element = document.getElementById("groupSelect");
element.appendChild(tag);
請記住，您有 2 個具有相同 ID（組）的元素，這將導致您的大部分 JS 崩潰。另請注意，您也可以使用 Jquery，這也可能更容易一些
uj5u.com熱心網友回復：
您需要使用 JavaScript。
首先，addEventListener()當用戶單擊提交按鈕時，您使用監聽。然后，我們獲取輸入的值并用逗號分隔它input.value.split(',')。然后，我們遍歷這些值，創建一個新<option>標簽并將其添加到<select>標簽中。
此外，您有兩個帶有 的元素id="group"，因此您需要更改其中之一。我將其更改<select>為id="group-select".
const submit = document.querySelector('button');
const input = document.querySelector('input');
const select = document.querySelector('select');
const myP = document.querySelector('p#myP');
submit.addEventListener('click', function(e)
{
const values = input.value.split(',');
if (myP.innerText == '')
{
myP.innerText = values;
}
else
{
myP.innerText = ', ' values;
}
for (let i in values)
{
const new_option = document.createElement('option');
new_option.value = values[i];
new_option.innerText = values[i];
select.appendChild(new_option);
}
});<!DOCTYPE html>
<html>
<body>
<h1>Existing Group</h1>
<p>IT, Cleaning, Accountant</p>
<h1>Add New Group</h1>
<p id="myP"></p>
<input type="tel" id="group" name="group" placeholder="enter group name">
<br><br>
<button type="button" class="btn btn-primary btn-sm">Submit</button>
<h1>Drop Down List</h1>
<label for="group">Choose a group:</label>
<select name="group" id="group-select">
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/310038.html
標籤：javascript html