HTML如何显示多项选择的输出？

Question

我正在创建一个查询表单，用户可以输入其信息并在弹出窗口中显示所有数据。

除了选择项仅显示单个输出的所有内容都可以显示。

我想显示我选择的所有输出。

例如：当我选择绿色和蓝色作为颜色时，它仅显示一种颜色，即绿色。

在此处查看此图像的屏幕截图：

希望有人可以帮助我，这是我的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>

Answer 1

另一答案