Question

I’m trying to show some different divs based on the value a user has choosen, when he/she clicks the “go-button”. Here is my script:

$(document).ready(function(){
$('#divarea1').hide();
$('#divarea2').hide();
$('#divarea3').hide();

    $('#go-button').click(function() {
     var whatToShow = $('#dropdown').val();
        if (whatToShow = ref1) {
            $('#divarea1').show();
            }
        else if (whatToShow = ref2) {
            $('#divarea2').show();
            }
        else {
            $('#divarea3').show();
            }
});
});

And here is my html:

<form name="ref-selector" method="POST" ACTION="URL">
    <select id="dropdown" name="dropdown"> 
        <option value="ref1">Book</option>
        <option value="ref2">Journal</option>
        <option value="ref3">Webpage</option>
    </select>
    <input type="button" id="go-button" value="Go">
</form>


<div id="divarea1">
<p>Some random content</p>
</div>

<div id="divarea2">
<p>Some other random content</p>
</div>

<div id="divarea3">
<p>The last random content</p>
</div>

I hope some of you will be able to help me. I’ve tried to look around for solutions, but nothing seems to be what I’m looking for, and I can’t get it to work from what else I have read.

Answer 1

I would suggest you to give the ID of the <div /> as the value of your options. This will refrain you to use if-else at all.

Try this:

<form name="ref-selector" method="POST" ACTION="URL">
    <select id="dropdown" name="dropdown"> 
        <option value="ref1">Book</option>
        <option value="ref2">Journal</option>
        <option value="ref3">Webpage</option>
    </select>
    <input type="button" id="go-button" value="Go">
</form>


<div id="divarea-ref1">
<p>Some random content</p>
</div>

<div id="divarea-ref2">
<p>Some other random content</p>
</div>

<div id="divarea-ref3">
<p>The last random content</p>
</div>

And with this JavaScript code, you add any number of dropdown items with any number of div just having the id with the format divarea-{dropdown.value}

$(document).ready(function () {
    $('div[id^=divarea-]').hide();

    $('#go-button').click(function () {
        var whatToShow = $('#dropdown').val();

        $('div[id^=divarea-]').hide();
        $('#divarea-' + whatToShow).show();
    });
});