javascript - 如何添加
标记项目以动态下拉列表
问题描述
我有一个脚本,它将接受用户输入并用 coma 区分它,
。接下来,我的表还将让用户添加列。那么如何从下拉列表中获取所有用户输入existing group
并动态显示它呢?add new group
例如:用户提交 2 个名为Nurse
and的组Doctor
,当用户添加新列时,下拉列表应包含现有的和新的组值,即IT, Cleaning, Accountant, Nurse, Doctor
。下拉列表应该能够从existing
和add new group
记录中动态更新值。
用户输入Nurse
和类别:Doctor
add new group
用户添加栏:
预期输出:
下拉列表应实时检索来自existing group
和add new group
的值IT, Cleaning, Accountant, Nurse, Doctor
。我更喜欢实时的原因是因为用户应该能够从下拉列表中选择他们添加的最新组,而无需刷新网页。
完整代码:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<h2>HTML Table</h2>
<table id="member_table">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<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>
<button onclick="javascript:appendColumn()">Add column</button>
<script>
function createSelectEl(values){
var select = document.createElement("select");
select.name = "group1";
select.id = "groupId"
// 1st option
var option = document.createElement("option");
option.text = 'Select One';
select.appendChild(option);
for (const val of values)
{
var option = document.createElement("option");
option.value = val;
option.text = val;
select.appendChild(option);
}
return select;
}
let groupNum = 1;
const tableEl = document.getElementById('member_table');
// append column to the HTML table
function appendColumn() {
// open loop for each row and append cell
for (let i = 0; i < tableEl.rows.length; i++) {
const values = ["IT", "Cleaning", "Accountant", "Nurse", "Doctor" ];
createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), createSelectEl(values), 'col');
// createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), i, 'col');
}
tableEl.rows[0].querySelector('td:last-child').textContent = 'Group' + groupNum;
groupNum++;
}
// create DIV element and append to the table cell
function createCell(cell, text, style) {
var div = document.createElement('div'); // create DIV element
//txt = document.createTextNode(text); // create text node
// div.appendChild(txt); // append text node to the DIV
div.appendChild(text);
div.setAttribute('class', style); // set DIV class attribute
div.setAttribute('className', style); // set DIV class attribute for IE (?!)
cell.appendChild(div); // append DIV to the table cell
}
</script>
<script>
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;
}
});
</script>
</body>
</html>
解决方案
我试图为这个问题创建逻辑,那么你在 myP 中添加新类别,这是你的段落,所以当你创建列并添加下拉列表时,我已经从 p 中获取值并将其拆分为“,”并将其附加到下拉列表中
function appendColumn() {
// open loop for each row and append cell
for (let i = 0; i < tableEl.rows.length; i++) {
const values = ["IT", "Cleaning", "Accountant"];
const myP = document.querySelector('p#myP');
var categories = myP.innerText.split(',');
for(let j =0; j < categories.length; j++){
values.push(categories[j]);
}
createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), createSelectEl(values), 'col');
// createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), i, 'col');
}
tableEl.rows[0].querySelector('td:last-child').textContent = 'Group' + groupNum;
groupNum++;
}
推荐阅读
- swift - Swift - 浮点值作为字典中的键?
- python - Python Numpy polyfit 行索引为 x?
- asp.net-mvc - .Net Framework Web 应用程序构建和调试器的 VScode
- python-3.x - 在Python中将iso格式的日期时间字符串转换为日期时间对象
- android - 如何将PNG添加到android中的浮动操作按钮
- validation - 在 Access 中对字段使用数据验证时,如何使表达式有条件?
- java - 如何在颤振资产中运行 java 代码?
- css - CSS悬停在堆叠元素上
- flutter - 如何在文本字段颤动中获得价值
- laravel - Laravel查询两列之和之差