HTML/JavaScript 表格 Muli 列表 Select 警报不工作

Question

我有以下表格 javascript:

function test() {
  var options = document.getElementById('genres1').options,
    count = 0;
  for (var i = 0; i < options.length; i++) {
    if (options[i].selected) count++;
  }

  alert(options);
}

<form>
  <select name="genres" id="genres1" size="6">
    <option value="r&b">R&B</option>
    <option value="jazz">Jazz</option>
    <option value="blues">Blues</option>
    <option value="newAge">New Age</option>
    <option value="classical">Classical</option>
    <option value="opera">Opera</option>
    </select><br><br>
  <input type="button" value="How many are selected?" onclick="test();" />
</form>

我正在尝试生成一条警告消息，该消息将提供用户从列表中 select 编辑的项目数。我总是遇到死胡同，包括无法 select 多个选项。非常感谢帮助。

Answer 1

用户 select 编辑的项目数未显示的原因是您没有显示计数。

你在做 alert(options); ，我认为这是一个错误，你打算写 alert(count);.

其次，为了让您能够 select 多个选项，下面的解决方案应该做到：

<form>   
   <select name="genres" id="genres1" size="6" multiple> <!-- note the use of "multiple" -->
      <option value="r&b">R&B</option>
      <option value="jazz">Jazz</option>
      <option value="blues">Blues</option>
      <option value="newAge">New Age</option>
      <option value="classical">Classical</option>
      <option value="opera">Opera</option>
   </select><br><br>
   <input type="button" value="How many are selected?" onclick="test();"/>
</form>

此外，请记住 select多个选项因操作系统和浏览器而异：

对于windows：按住控制（ctrl）键到select倍选项
对于Mac：按住命令按钮select多个选项

Answer 2

请检查此代码

<script type="text/javascript">
function test()
{
  count = 0;
  var x=document.getElementById("genres1");
  for (var i = 0; i < x.options.length; i++) {
     if(x.options[i].selected ==true){
          alert(x.options[i].value);
          count++;
      }
  }
  alert(count)
}
</script>

和html代码

<form>   
<select name="genres" id="genres1" size="6"  multiple="">
<option value="r&b">R&B</option>
<option value="jazz">Jazz</option>
<option value="blues">Blues</option>
<option value="newAge">New Age</option>
<option value="classical">Classical</option>
<option value="opera">Opera</option>
 </select><br><br>
<input type="button" value="How many are selected?" onclick="test();"/>
</form>

HTML/JavaScript 表格 Muli 列表 Select 警报不工作

HTML/JavaScript Form Muli List Select Alert not working

html

javascript

select

alert

list