如何解决JavaScript比较下拉列表
我是Java的新手，在比较HTML元素时遇到了麻烦。这就是我所拥有的功能，我无法让if语句与“其他”一词进行比较，这是我列出的任何想法之一吗？
function createList(form) {
var row;
var table;
var form;
table = document.getElementById("shoppingList");
row = table.insertRow(table.rows.length);
form = form;
if (form.elements["storeItems"].value === "Other"){
row.insertCell(0).innerHTML = form.elements["otherItems"].value;}
else{
row.insertCell(0).innerHTML = form.elements["storeItems"].value;
}
row.insertCell(1).innerHTML = form.elements["funStores"].value;
row.insertCell(2).innerHTML = form.elements["selectColor"].value;
row.insertCell(3).innerHTML = form.elements["notes"].value;
}
我的目标是，如果选择了列表选项“其他”，它将从文本“其他”框而不是单词“其他”中提取数据。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="description" content="Benoit's living space">
<meta name="keywords" content="home,funiture,living,space,Benoit">
<meta name="author" content="Jesse Benoit">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Jesse Benoit Homework Chapter 9</title>
<link rel="stylesheet" href="../css/Homework11.css"> <!-- Import of CSS -->
</head>
<body>
<h2 class="center">Furniture Shopping List</h2> <!-- Header 2 Centered -->
<div class="row">
<p class="center"> <!-- p cenetered with instructions -->
Time to go shopping! Pick an Item or Items from the list. Pick a Store from the list. Pick a color from the list. Added any extra notes you would like.
</p>
<div class="left">
<p>
<!-- Form to gather inputs from the user -->
<form>
<label>List of Items</label>
<select id="storeItems" size="4"></select> <br>
<label>Other: </label>
<input type="text" id="otherItems"> <br>
<label>Stores</label>
<select id="funStores" size="4"></select> <br>
<label>Other: </label>
<input type="text" id="otherStores"> <br>
<label>Chose a Color</label> <br>
<input type="radio" name="selectColor" value="White">White<br>
<input type="radio" name="selectColor" value="Black">Black<br>
<input type="radio" name="selectColor" value="Blue">Blue<br>
<input type="radio" name="selectColor" value="Red">Red<br>
<input type="radio" name="selectColor" value="OtherColor">Other<br>
<div id="selectColor"></div>
<label>Notes: </label><br>
<textarea rows="5" cols="20" id="notes"></textarea><br>
<input type="button" id="submit" value="Create Shopping List" onClick="createList(this.form);"> <!-- Button to create an invitation -->
<br><br>
</form>
</p>
</div>
<div class="right">
<table id="shoppingList">
<tr>
<th>Item </th><th>Store </th><th>Color of Item </th><th>Notes </th>
</tr>
</table>
</div>
</div>
<br>
<script src="../js/homework11.js"></script>
</body>
</html>
selectItem();
selectStore();
function selectItem() {
var myItems = "Couch; Table; Dresser; Chair; Bed; Other" ;
var itemArray = myItems.split(";");
var name = 0;
var myOption = "";
for (var i = 0; i < itemArray.length; i++) {
name = itemArray[i];
myOption = document.createElement("option");
myOption.name = name;
myOption.value = name;
myOption.text = name;
document.getElementById("storeItems").appendChild(myOption);
}
}
function selectStore(){
var myStore = "Walmart; Target; Wayfair; Other" ;
var storeArray = myStore.split(";");
var name = 0;
var myOption = "";
for (var i = 0; i < storeArray.length; i++) {
name = storeArray[i];
myOption = document.createElement("option");
myOption.name = name;
myOption.value = name;
myOption.text = name;
document.getElementById("funStores").appendChild(myOption);
}
}
function createList(form) {
var row;
var table;
var form;
table = document.getElementById("shoppingList");
row = table.insertRow(table.rows.length);
form = form;
if (form.elements["storeItems"].value === "Other"){
row.insertCell(0).innerHTML = form.elements["otherItems"].value;}
else{
row.insertCell(0).innerHTML = form.elements["storeItems"].value;
}
row.insertCell(1).innerHTML = form.elements["funStores"].value;
row.insertCell(2).innerHTML = form.elements["selectColor"].value;
row.insertCell(3).innerHTML = form.elements["notes"].value;
}
解决方法
如果有下拉菜单，则可以通过以下方式获取所选值：
let dropdownEl = document.getElementById('storeItems');
console.log(dropdownEl.value);
我对form是什么感到有些困惑-但我假设您的下拉列表中有id="storeItems"。
此外，我假设您使用<select>...</select>标签创建了下拉列表。
原来问题在于下拉列表是一个功能，我需要在HTML中列出我的选项
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
