Home/ Questions/Q 6733917
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:49:38+00:00

This is borrowed from another question I made on the site, but would have

  • 0

This is borrowed from another question I made on the site, but would have got really messy.

So using some of the code from one of the repliers, how do I get this code to work… or have I got it completely wrong.

Select Options are:

<select style="width: 220px; display: none;" id="speedB" name="category">
    <option value=""<?if ($category == ""){?> selected="selected"<?}?>>Please Select</option>
    <option value="1"<?if ($category == "1"){?> selected="selected"<?}?>>Pest Inspectors</option>
    <option value="3"<?if ($category == "3"){?> selected="selected"<?}?>>Building Inspectors</option>
    <option value="2"<?if ($category == "2"){?> selected="selected"<?}?>>Removalists</option>
    <option value="5"<?if ($category == "5"){?> selected="selected"<?}?>>Conveyancing</option>
    <option value="4"<?if ($category == "4"){?> selected="selected"<?}?>>Pool Inspectors</option>
</select>

JavaScript:

$('#speedB').change(function() {
                      var myTypes = {
                        '': '.nothing',
                        '1': '.pest',
                        '2': '.build',
                        '3': '.removals',
                        '4': '.legal',
                        '5': '.pool'
                      }
                      var selectedType = myTypes[$(this).val()];
                      $('#topright').html('<div class="'+selectedType+'"/></div>');
                    });

HTML:

<div id="topright"></div>

CSS:

#topright {
height: 70px;
position: absolute;
right: 0;
top: 0;
width: 70px;
}
.pest {
background: url("images/pestcorner.png") no-repeat scroll 0 0 transparent;
}
.build {
background: url("images/buildcorner.png") no-repeat scroll 0 0 transparent;
}
.removals {
background: url("images/removalscorner.png") no-repeat scroll 0 0 transparent;
}
.legal {
background: url("images/legalcorner.png") no-repeat scroll 0 0 transparent;
}
.pool {
background: url("images/poolcorner.png") no-repeat scroll 0 0 transparent;
}

Essentially, I want user to select from select box, and that invokes display of the css class.

I think I have screwed the js up.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I ‘d do it like this:

    First, add HTML data attributes with the corresponding class name for each option:

    <select style="width: 220px; display: none;" id="speedB" name="category">
    <option data-class="nothing" value=""<?if ($category == ""){?> selected="selected"<?}?>>Please Select</option>
    <option data-class="pest" value="1"<?if ($category == "1"){?> selected="selected"<?}?>>Pest Inspectors</option>
    <option data-class="build" value="3"<?if ($category == "3"){?> selected="selected"<?}?>>Building Inspectors</option>
    <option data-class="removals" value="2"<?if ($category == "2"){?> selected="selected"<?}?>>Removalists</option>
    <option data-class="legal" value="5"<?if ($category == "5"){?> selected="selected"<?}?>>Conveyancing</option>
    <option data-class="pool" value="4"<?if ($category == "4"){?> selected="selected"<?}?>>Pool Inspectors</option>
</select>

    This way the relationships between CSS class and selected option are nicely prominent.
    You can then do:

    $('#speedB').change(function() {
    $('#topright').html('<div class="'+$(this).find(":selected").data("class")+'"/></div>');
});

    Apart from that, you got the solution yourself (extra “.” in the name of the class being added).

    • 0