Replace and display a new page after value getting selected from dropdown in jsp

Question

I have a dashboard where I have multiple drop down values, one of the drop-down have values which when get selected and a submit button is clicked it replaces the existing page design into a new page design.

Can anyone please shed some guidance how can I achieve that using JSP and servlets?

All I can think of is doing it using JavaScript and open a new window, but how can I do that in the same frame or <div> of the existing page?

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

Any help or valuable comments would be really great!

You can put all code in div and just refresh the div as change event occurs on the select. see these [link1](http://stackoverflow.com/q/16874668/1031945) [link2](http://stackoverflow.com/q/18490026/1031945) — Aniket Kulkarni, Jan 06 '14 at 10:34

score 3 · Accepted Answer · answered Jan 06 '14 at 11:02

<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>

Thank you Dipak, it did work, I have one quick question, if I need to show level1_category div's design from the beginning by default, how do you suggest, I would achieve that? — AKIWEB, Jan 06 '14 at 21:51
I got that by setting display:block proprety in the default '
' i needed :) Thanks — AKIWEB, Jan 06 '14 at 22:21

Replace and display a new page after value getting selected from dropdown in jsp

1 Answers1

Linked