我正在创建一个查询表单，用户可以输入其信息并在弹出窗口中显示所有数据。
除了只显示单个输出的多项选择之外，所有内容都可以显示。
我想显示我选择的所有输出。
例如:当我选择绿色和蓝色作为颜色时，它只显示 1 种颜色，即绿色。
请看这里的图像截图:
希望有人能帮助我，这是我的 HTML 和 Javascript 代码。
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + document.form1.eyeColor.value;
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple>
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</option>
</select>
</td>
</tr>
</table>
</p>
<p><input TYPE="BUTTON" VALUE="Submit" onClick="display();"></p>
</form>
</body>
</html>最佳答案
您需要将 document.form1.eyeColor.value; 替换为 Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value); 然后你就可以得到选择的值。从这个 map() 方法获取整个选定的值。
注意:window.open() 方法在此编辑器中不起作用，因此我使用 alert() 方法来渲染填充结果。
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value);
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
alert(message);
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple="multiple">
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</select>
</td>
</tr>
</table>
<p><input type="button" value="Submit" onclick="display()"></p>
</form>
</body>
</html>关于javascript - HTML 如何显示多项选择的输出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60348770/