CODEWITHSUNDEEP
jqueryhtml
RCB
RCB

Reputation: 99

Display text depending on dropdown choice

How can I read the selected option and display a div depending on the choice:

<select>
    <option value="1">Package 1</option>
    <option value="2">Package 2</option>
    <option value="3">Package 3</option>
    <option value="4">Package 4</option>
    <option value="5">Package 5</option>
    <option value="6">Package 6</option>
</select>

If you can have a look at this fiddle and integrate the code in it : http://jsfiddle.net/JVzCt/

Upvotes: 0

Views: 637

Answers (4)

Jamie Barker
Jamie Barker

Reputation: 8246

$('select').val();

will grab the value.

Then let's say you have 6 hidden divs with an ID of "Package-X", where X is a number.

You can simply do:

$('#Package-' + $('select').val()).show();

You don't need an ID on your select as Icarus suggested, but code will be cleaner and better with it on as there is no chance of grabbing the wrong select element.

Upvotes: 0

Dean Whitehouse
Dean Whitehouse

Reputation: 894

If you also want to have it update when they change the selection

JS Fiddle: http://jsfiddle.net/DeanWhitehouse/8L5kG/

<select id="myselect">
    <option value=""></option>
        <option value="1">Package 1</option>
        <option value="2">Package 2</option>
        <option value="3">Package 3</option>
        <option value="4">Package 4</option>
        <option value="5">Package 5</option>
        <option value="6">Package 6</option>
    </select>

<div class='output'></div>

    <script>
$('#myselect').change(function(){
            var val = $(this).val();

                $('.output').html('package ' + val);   

        });
</script>

Upvotes: 1

schnawel007
schnawel007

Reputation: 4020

HTML:

<select id="myselect">
        <option value="1">Package 1</option>
        <option value="2">Package 2</option>
        <option value="3">Package 3</option>
        <option value="4">Package 4</option>
        <option value="5">Package 5</option>
        <option value="6">Package 6</option>
    </select>

JS:

value = $( "#myselect" ).val();

Upvotes: 0

Icarus
Icarus

Reputation: 63956

You should add an id to the select element. For example:

<select id="optionsPackage" .../>

Now do something like:

var selected = $('#optionsPackage').val();
if(selected=='1')
{
    $('#divID').show(); //or whatever corresponding DIV id 
}

Upvotes: 0

Related Questions