javascript - 单击提交按钮时显示另一个 DIV

Question

这是我的脚本

<script type="text/javascript">
           function showlevel1() {
               var l1 = document.getElementById('default');
               l1.style.display = 'block';
               var l2 = document.getElementById('secondDiv');
               l2.style.display = 'none';
           }

           function showlevel2() {
               var l2 = document.getElementById('secondDiv');
               l2.style.display = 'block';
               var l1 = document.getElementById('default');
               l1.style.display = 'none';

           }
           function selectHandler(select) {

               if (select.value == 'count') {
                   showlevel2();

               } else if (select.value == 'Top') {
                   showlevel1();
               } 
           }
</script>

HTML:

<form>
<select id='type'>
<option value="Top">TOP</option>
<option value="count">COUNT</option>
</select>

<input type='submit' value='submit' onclick=selectHandler(this)>
</form>

<div id='default' style="display:block">
    <h1>Div 1</h2>
</div>

<div id='secondDiv' style="display:none">
    <h2> Div 2</h1>
</div>

当我加载页面时，DIV 1 确实会显示，因为该属性设置为 display:'Block' 但当我从下拉列表中执行选择时，它会显示出来从下拉列表中选择 Count 并点击提交按钮后，永远不会更改为 DIV2？

任何人都可以帮助解决这个问题并让我知道我做错了什么吗？

谢谢

Answer 1

您的select.value输出submit因为你的 this 元素引用了

-> <input type="submit" value="submit"/>

为什么

selectHandler(this)由您的 submit 触发按钮而不是您的<select>标签，所以当你执行select.value时它返回submit作为您的文本。

看到您的问题后，我猜您需要获取 select标签值。

试试这个

function selectHandler(select) {
   // get your drop down list element i.e select tag
   var selected = document.getElementById('type');  
   if (selected.value === 'Count') {
      showlevel2();
   } 
   else if (selected.value === 'Top') {
      showlevel1();
   } 
}

看到您的评论后

问题是你使用 type="submit" 当您点击它时，它会发布到同一页面。将其更改为 type="button"

<input type='button' value='submit' onclick="selectHandler()">

function selectHandler() {
   // get your drop down list element i.e select tag
   var select = document.getElementById('type');  
   if (select.value === 'Count') {
      showlevel2();
   } 
   else if (select.value === 'Top') {
      showlevel1();
   } 
}

或者

<input type='submit' value='submit' onclick="return selectHandler()">

function selectHandler() {
   var select = document.getElementById('type');  
   if (select.value === 'Count')
      showlevel2();
   else if (select.value === 'Top') 
      showlevel1();
   return false;
}

js在这里摆弄http://jsfiddle.net/QGsza/68/