Question

我们说有一个列表A = [1,2,3,4,5]

用户可以选择一个或多个选项（通过多选下拉菜单完成）

在侧面屏幕上，我想显示（html）用户选择的选项，并且当用户从多选中选择或取消选择选项时，列表应该更新。

如何将html更新为＆＃34;更新＆＃34;去做这个？使列表显示很简单，只需使用js获取所选选项，然后：

    document.getElementById("printhere").innerHTML = selectedlist.join("<br>");

但是，当我选择或取消选择选项时，打印列表自然不会更新。

任何提示都会有所帮助。谢谢！

Answer 1

除了获取所选选项的完整列表外，您应该使用change事件，如Kevin对您的问题进行评论，以便每次都选择此选项。然后将此节点附加到侧屏幕。检查快速示例：

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector('select[name="ice-cream"]').onchange=changeEventHandler;
},false);

let parent = document.getElementById('results')

function changeEventHandler(event) {
    // You can use “this” to refer to the selected element.
    if(!event.target.value) alert('Please Select One');
    else {
    let node = document.createElement("p");
   node.innerText = event.target.value
   parent.appendChild(node)
   
    } 
}

<label>Choose an ice cream flavor:
    <select id="ice-cream" name="ice-cream">
        <option value="">Select One …</option>
        <option value="chocolate">Chocolate</option>
        <option value="strawberry">Strawberry</option>
        <option value="vanilla">Vanilla</option>
    </select>
</label>

<div id = 'results'>
</div>

选择新选项时更新列表 - html / js

1 个答案: