CODEWITHSUNDEEP
javascriptjquery
jdp
jdp

Reputation: 3516

Change text based on select box value

Full Disclosure: I am bad at javascript.

I'm trying to write something that takes the value of a select box (in this case, it contains a list of themes the user can choose from), compares it against an array containing all the themes allowed, and display a preview link to the user.

Below is some select code.

My Array containing the preview links:

var themePreview = [];
themePreview[0] = '&nbsp;&nbsp;<a href="http://www.trafficgettingblogs.com/?preview=1&template=arclite&stylesheet=arclite&TB_iframe=true&width=1000&height=700" class="thickbox thickbox-preview">Preview Arclite</a>';
themePreview[1] = '&nbsp;&nbsp;<a href="http://www.trafficgettingblogs.com/?preview=1&template=arras&stylesheet=arras&TB_iframe=true&width=1000&height=700" class="thickbox thickbox-preview">Preview Arras</a>';
themePreview[2] = '&nbsp;&nbsp;<a href="http://www.trafficgettingblogs.com/?preview=1&template=carrington-blog&stylesheet=carrington-blog&TB_iframe=true&width=1000&height=700" class="thickbox thickbox-preview">Preview Carrington Blog</a>';

My jQuery attempting to get the select box value and display a preview link:

$('select #selectedTheme').change(function() {
    //document.write('test'); // Try to see if I'm selecting what I need.
    $('#previewTheme').value() = themePreview[$('#selectedTheme option:selected').value()];
});

The select box has an ID of selectedTheme.

I'm not getting any errors, but I don't seem to be selecting the select box.

I am sure this is a very simple problem. I'm trying to improve my javascript skills. Rather unsuccessfully, it seems.

Upvotes: 0

Views: 863

Answers (2)

joelt
joelt

Reputation: 2680

You should be able to just get the value of the select, rather than the value of a specific option. Ie, change $('#selectedTheme option:selected').value() to $('#selectedTheme').val()

Upvotes: 1

Aaron Digulla
Aaron Digulla

Reputation: 328594

The assignment in your code doesn't do anything.

This should work:

$('#previewTheme').html( themePreview[$('#selectedTheme option:selected').value()] );

i.e. html() returns the current content of an element, html(x) replaces it with x.

Upvotes: 1

Related Questions