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

たった1つの変更で、あなたは行き​​ます....

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

と置換する

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

于 2013-11-13T13:32:35.783 に答える