CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jack Johnson
Jack Johnson

Reputation: 611

Show div's based on a select option?

I'm having issues trying to create the code behind this. I'm trying to show/hide div's based on a select option selection, with at total of 4 options.

There are 2 select elements

<select>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
</select>

<select>
    <option value="value3">Value 3</option>
    <option value="value4">Value 4</option>
</select>

The combinations would be

value1-value3 value1-value4

value2-value3 value2-value4

The second select element is empty until you select from the first select element and then you are able to select from the second element and it shows the div for that value.

The div's would be.

<div id="value-1-3">value1-value3</div>
<div id="value-1-4">value1-value4</div>

<div id="value-2-3">value2-value3</div>
<div id="value-2-4">value2-value4</div>

Can you guys help me to do this ?.

Upvotes: 0

Views: 436

Answers (3)

David Thomas
David Thomas

Reputation: 253308

My own suggestion would be:

/* a more precise selector would be useful, whether by specifying an ancestor or
   by adding an id to the select elements. Binding the change event-handler: */
$('select').change(function(){
    /* creating the id of the relevant element to show using map(),
       to the string 'value-' plus whatever the map(), and get(), methods return: */
    $('#value-' + $('select option:selected').map(function(){
        // removing all non-numeric characters, returning the numbers:
        return this.value.replace(/\D+/g,'');
    /* forming an array with get(),
       joining the array elements together with hyphens, with join(),
       showing the element whose id matches the created string
       selecting siblings, removing the select elements from that selection,
       and hiding them: */
    }).get().join('-')).show().siblings().not('select').hide();
/* triggering the change event so the above always only shows/hides
   the relevant elements on loading the DOM: */
}).change();

JS Fiddle demo.

This does not toggle the display of the second select element, by design, since I honestly don't see the need, since the first select will always have a chosen, selected, option (even if only by default) and will, otherwise, require a non-selected option to be chosen to initiate the select's change event (even if you want to choose the option that's already selected).

References:

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

var $divs = $('div[id^="value-"]').hide();

var $sel1 = $('#sel1').one('change', function(){
    $sel2.prop('disabled', false);
});
var $sel2 = $('#sel2');

$sel1.add($sel2).change(function(){
    var p1 = $sel1.val().replace(/\D+/, '');
    var p2 = $sel2.val().replace(/\D+/, '');
    $divs.hide();
    $('#value-' + p1 + '-' + p2).show();
})

Demo: Fiddle

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

I would give some ID's to your selects, for the sake of this example, lets use sel1 and sel2 respectively. I would also change your value in the option to just be a number, else some trimming of the value or a regex will be needed:

$("#sel1").change(function() {
    $("#sel2").prop("disabled", false); //enable the second select
    $("#sel2").change(); //trigger a change event on select2
});

$("#sel2").change(function() {
    //Gather your select values
    var sel1Value = $("#sel1").val();
    var sel2Value = this.value;

    //Concatenate a selector and show it!
    $("div").hide(); //hide previously shown divs
    $("#value-" + sel1Value + "-" + sel2Value).show();
});

Fiddle: http://jsfiddle.net/b7Q8s/18/

Upvotes: 2

Related Questions