javascript - 获取下拉列表中选定选项的值

Question

我使用以下代码创建了一个下拉菜单：

// Add priority to form within bottom row div
const formPriority = document.createElement("select");
formPriority.setAttribute("name","project");
formPriority.setAttribute("placeholder","Priority");

const formPriorityClass = document.createAttribute("class");
formPriorityClass.value = "add-item-form-priority";

const priorityOption1 = document.createElement("option");
priorityOption1.value = "Priority 1";
priorityOption1.text = "Priority 1";
formPriority.appendChild(priorityOption1);

const priorityOption2 = document.createElement("option");
priorityOption2.value = "Priority 2";
priorityOption2.text = "Priority 2";
formPriority.appendChild(priorityOption2);

const priorityOption3 = document.createElement("option");
priorityOption3.value = "Priority 3";
priorityOption3.text = "Priority 3";
formPriority.appendChild(priorityOption3);

const priorityOption4 = document.createElement("option");
priorityOption4.value = "Priority 4";
priorityOption4.text = "Priority 4";
formPriority.appendChild(priorityOption4);
addItemNewBottomRowDiv.appendChild(formPriority);

我正在尝试获取所选选项的值，但无法获得它。这是我目前所在的位置：

let newListItemPriority = document.querySelector(".add-item-form-priority");
let newListItemPrioritySeleted = newListItemPriority.options[newListItemPriority.selectedIndex].value;

我在网上尝试了各种不同的东西，但到目前为止还没有运气。目前我收到以下错误：

Uncaught TypeError: Cannot read property 'options' of null

如果有人对我如何获得价值有任何想法，将不胜感激。

标签： javascripthtml

Answer 1

这样做的问题是您没有习惯将任何元素element.setAttributeNode()设置add-item-form-priority为类值。一旦你这样做了，你的代码就可以工作了。

const formPriority = document.createElement("select");
formPriority.setAttribute("name","project");
formPriority.setAttribute("placeholder","Priority");

const formPriorityClass = document.createAttribute("class");
formPriorityClass.value = "add-item-form-priority";
formPriority.setAttributeNode(formPriorityClass);

const priorityOption1 = document.createElement("option");
priorityOption1.value = "Priority 1";
priorityOption1.text = "Priority 1";
formPriority.appendChild(priorityOption1);

const priorityOption2 = document.createElement("option");
priorityOption2.value = "Priority 2";
priorityOption2.text = "Priority 2";
formPriority.appendChild(priorityOption2);

const priorityOption3 = document.createElement("option");
priorityOption3.value = "Priority 3";
priorityOption3.text = "Priority 3";
formPriority.appendChild(priorityOption3);

const priorityOption4 = document.createElement("option");
priorityOption4.value = "Priority 4";
priorityOption4.text = "Priority 4";
formPriority.appendChild(priorityOption4);
addItemNewBottomRowDiv.appendChild(formPriority);