javascript - 从 jsp 中的下拉列表中选择值后替换并显示新页面

标签 javascript jquery html jsp servlets

我有一个仪表板,其中有多个下拉值,其中一个下拉值具有当被选择并单击提交按钮时的值,它将现有的页面设计替换为新的页面设计。

任何人都可以指导我如何使用 JSP 和 servlet 实现这一目标吗?

我能想到的就是使用 JavaScript 并打开一个新窗口,但是我怎样才能在同一帧或 <div> 中做到这一点?现有页面?

Also I need to keep the existing design by default before making an attempt to switch the page.

任何帮助或宝贵的意见都会非常好!

最佳答案

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

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

    }
    function categorySelectHandler(select) {

        if (select.value == '1') {

            var l1 = document.getElementById('level1_category');
            l1.style.display = 'none';
            var l2 = document.getElementById('level2_category');
            l2.style.display = 'none';

        } else if (select.value == '2') {
            showlevel1();
        } else if (select.value == '3') {
            showlevel2();
        }


    }
</script>


<html>
<select id="select_level" onchange="categorySelectHandler(this)">
      <option value="1">Create at level 1</option>
      <option value="2">Create at level 2</option>
      <option value="3">Create at level 3</option>
</select>


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

//   # Your Code Here

</div>

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

//   # Your Code Here

</div>
</html>

关于javascript - 从 jsp 中的下拉列表中选择值后替换并显示新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20947996/

相关文章:

javascript - 页面重定向在 PHP 或 JavaScript 中无法始终如一地工作

javascript - 使用 urllib2 读取时禁用 JavaScript

javascript - jquery:来自 php 的数组从未定义

javascript - jQuery 悬停产生错误 "Uncaught SyntaxError: missing )"

javascript - Skrollr:如何只在达到某个点后才开始动画?

php - 通过在 mysql 查询后返回空标签,html 大小增加了三倍 |如何解决 - laravel

javascript - node/mongo/functions/scoping 的奇怪行为

javascript - 猫头鹰轮播响应 1170px div 宽度问题

php - 如何使用 PHP Simple HTML DOM Parser 在 HTML 文件中找到最后一个 <div class>?

javascript - DIV-元素绝对(!)定位