时间戳

首页 > 解决方案 > HTML 如何显示多选的输出？

javascript - HTML 如何显示多选的输出？

问题描述

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

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

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

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

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

在此处输入图像描述

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

标签： javascripthtml

解决方案

您需要替换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>

推荐阅读