Question

I am trying to append a different id to options within select element. I can do this with images, but dont know how to do it with ID’s

Example: for images we use:

$(document).ready(function() {
$("#selectanimage").change(function() {
    var src = $(this).val();

    $("#masterPreview").html(src ? "<img src='" + src + "'>" : "");
});
});

The typical select would be:

<select id="selectanimage" name="selectanimage" style="width: 474px;" class="required">
<option value="null">--- Select your Image ... ---</option>
<option value="share/images/125x125blk.png">125px x 125px Black Background</option>
<option value="share/images/125x125wht.png">125px x 125px White Background</option>
<option value="share/images/180x100blk.png">180px x 100px Black Background</option>
</select>

What I want to do is .. change value in options to differenct class or id, and then get the js to switch accordingly.

So option value=”apple”
option value=”foo”

Im not sure if thats 100% clear lol

The objective is that the Div id masterpreview can contain the new class or id element of the option.

ie.

on click of option ( say someone clicked foo )

Then we would generate:

<div id="masterPreview">
   <div class="foo"></div>    
</div>

Answer 1

If I understand you correctly (which quite frankly I doubt – your question is very confusing) you are saying that you want to have a select element where choosing different options will display different divs.

You think this can be achieved by giving each option a value that is the class name of the div to be shown (where the actual div is contained by the div “masterPreview” elsewhere on the page), but you don’t know how to write the code to hide and show the corresponding divs when different options are selected.

For the requirement as I have summarised it, here’s a working demo so that you can see if I’m even in the ballpark: http://jsfiddle.net/abw3T/

If that’s remotely like what you want to do then this is how to code it:

<style>
   #masterPreview > div { display: none; }
</style>

<select>
    <option value="none">--Please select--</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="carrot">Carrot</option>
</select>
<div id="masterPreview">
    <div class="apple">Apple Div</div>
    <div class="banana">Banana Div</div>
    <div class="carrot">Carrot Div</div>
</div>

<script>
$("select").change(function(){
    $("#masterPreview > div").hide();
    $("." + $(this).val()).show();
});
</script>

There’s really not much too it: on the change event for the select hide all any of the masterPreview’s child divs that might currently visible and then show only the one with the class name matching the value of the selected option.

Note: you shouldn’t use classes to uniquely identify elements, that’s what the id attribute is for, but your sample div uses a class so I’ve stuck with that. The code would be exactly the same to do it with ids except for the line with .show() which would be:

$("#" + $(this).val()).show()