Javascript下拉列表有多个值的案例

Question

我正在尝试创建一个显示多个预设文本的下拉菜单。

所以，如果我从下拉列表中选择 A，1、2、3、4、5 将显示在页面上的单独区域中 - 那么 A 是否在 case 语句或类似的东西中设置了值？ 如果我随后从下拉列表中选择 B，则 2、4、6、8、10 将显示先前值的显示位置 - 基本上在页面上替换它们。

大家有什么想法吗？

Answer 1

如果我理解正确，这就是你想要做的。

JS Fiddle 示例 https://jsfiddle.net/ogvbe3mq/1/

HTML

<select id="ddl">
  <option value='0'>Select One</option>
  <option value='A'>A</option>
  <option value='B'>B</option>
</select>
<br/>
<div id='content1'>
</div>
<div id='content2'>
</div>
<div id='content3'>
</div>

Javascript

document.getElementById('ddl').addEventListener('change', myFunction);

function myFunction() {
  var e = document.getElementById('ddl');
  var val = e.options[e.selectedIndex].value;
  switch(val) {
    case "A" : document.getElementById('content1').innerHTML = "1";
               document.getElementById('content2').innerHTML = "2";
               document.getElementById('content3').innerHTML = "3";
               break;
    case "B" : document.getElementById('content1').innerHTML = "4";
               document.getElementById('content2').innerHTML = "5";
               document.getElementById('content3').innerHTML = "6";
               break;
    default : document.getElementById('content1').innerHTML = "";
              document.getElementById('content2').innerHTML = "";
              document.getElementById('content3').innerHTML = "";
              break;

  }
}