HTML 如何显示多选的输出？答案

【问题标题】：HTML How do I show output for multiple selection?HTML 如何显示多选的输出？
【发布时间】：2020-02-22 12:42:54
【问题描述】：

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

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

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

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

在这里看这张图片截图：

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

【问题讨论】：

这个帖子应该回答你的问题：stackoverflow.com/q/11821261/5733078
@devamat 没有帮助

标签： javascript html

【解决方案1】：

您需要将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>

【讨论】：

【解决方案2】：

您可以使用选定的选项来获取选定的选项。

let selectedOptions= document.form1.eyeColor.selectedOptions;
let selectedValues = [];
for (let i=0; i < selectedOptions.length; i++) {
    selectedValues[i] = selectedOptions[i].value;
}
console.log(selectedValues);

希望这会有所帮助。

【讨论】：