Question

这是我的script

<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'但是当我从下拉列表中执行选择时，它永远不会更改为DIV2 { {1}}从下拉列表和提交点击按钮中进行选择？

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

由于

Answer 1

快速查看一下，您似乎已经检查了小写值'count'而不是'Count'。

即。替换

select.value == 'count'

与

select.value == 'Count'

Answer 2

您的select.value输出submit，因为此元素引用

- ＆GT; <input type="submit" value="submit"/>

<强>为什么

selectHandler(this)由您的submit按钮而不是<select>标记触发，因此当您执行select.value时，它会返回submit作为您的文字。< / p>

在看到您的问题后，我猜您需要获取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 fiddle here http://jsfiddle.net/QGsza/68/

Answer 3

在你的onclick按钮上，你正在传递“this”，这将是一个指向按钮本身的指针。

将其更改为document.getElementById('type')，因为看起来你的selectHandler期待select元素

另外，将按钮从“提交”更改为“按钮”，因为提交将告诉浏览器发出请求。

Answer 4

第一个DIV：

<div style="display:block;" id="first">

第二个DIV：

<div style="display:none;" id="second">

并在函数add：

document.getElementById('first').style.display = 'none'; document.getElementById('second').style.display = 'block';

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

4 个答案: