0

我正在使用此功能根据从下拉列表中选择的项目动态加载内容。这是我的代码：

<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript">
$(function() {
    $('.group').hide();
    $('#div1').show();
    $('#stype').change(function() {
        var val = $(this).val();
        if (val) {
            $('div:not(#div' + val + ')').slideUp();
            $('#div' + val).slideDown();
        } else {
            $('div').slideDown();
        }
    });
});
</script>
<form action="a.php" method="post">

  Select:
  <select name="stype" id="stype">
    <option value="1">op1</option>
    <option value="2">op2</option>
    <option value="3">op3</option>
    <option value="4">op4</option>
  </select>
<br><br>

<div id="div1" class="group">
This is div 1.
</div>

<div id="div2" class="group">
This is div 2.
</div>

<div id="div3" class="group">
This is div 3.
</div>

<div id="div4" class="group">
This is div 4.
</div>

<input type="submit" name="submit" value=" Submit " />
</form>
</html>

当我在一个普通的 php 文件上运行它时，这非常有效。但是当我试图把它放在我的网站上并在那里显示为内容时，每当我从下拉列表中进行选择时，网站的整个页面都会向上滑动并被隐藏。（页眉、面包屑、页脚、侧边栏等）

如何解决这个问题？

4

3 回答 3

1

您是否尝试过更换

$('div:not(#div' + val + ')').slideUp();

和

$('.group').slideUp();

于 2013-11-13T13:20:19.930 回答
0

尝试改变这个：

var val = $(this).val();
    if (val) {
        $('div:not(#div' + val + ')').slideUp();
        $('#div' + val).slideDown();
    } else {
        $('div').slideDown();
    }

为了这：

var val = $('#stype option:selected').val();
    if (val != null) {
        $('div:not(#div' + val + ')').slideUp();
        $('#div' + val).slideDown();
    } else {
        $('div').slideDown();
    }
于 2013-11-13T13:24:50.457 回答
0

只需一个改变，你就走了....

$('div:not(#div' + val + ')').slideUp();

用。。。来代替

$('form div:not(#div' + val + ')').slideUp();

于 2013-11-13T13:32:35.783 回答