Question

Following on from a question I posted yesterday. Found here: Append different div id to option selects?

This is working Great ..

I just need to add one extra tweak, and I pretty much have it working how I need it.

Synopsis.

User picks option from select menu.
That option, triggers a div ID.

I also need it to change input ID aswell .

Is this dooable ?

Typical jQuery I have is:

$(document).ready(function() {
$("#selectanimage").change(function(){
$("#masterPreview > div").hide();
$("#" + $(this).val()).show();
});
});

The select is :

<select id="selectanimage" name="selectanimage" style="width: 474px;" class="required">
<option value="null">--- Select your Image ... ---</option>
<option value="oneblk">125px x 125px Black Background</option>
</select>

The DIV this triggers is:

<div id="masterPreview">
<div id="oneblk">Apple Div</div>
</div>

However I also have an input element whos ID I want to simultaneously change based on select option chosen.

Its just a regular input element.

Any suggestions please ( incidentally the inputs ID ) will vary dependant on option select and it must be a different ID from that within the option select ( for css reasons )

EDIT———————————-

Fiddle here: >> http://jsfiddle.net/ozzy/d5s9T/

Basically ( only coded for the first select ) but you should get the idea.

If they select the first option, I need the input id to become oneblkinput )

If they chose second select option I need input id to become onewhtinput

Etc

Answer 1

Assuming that you have a way to “select” the input…

$(document).ready(function() {
    $("#selectanimage").change(function(){
        $("#masterPreview > div").hide();
        $("#" + $(this).val()).show();
        // The below line would update the ID of the element
        $("input.add_my_text").attr("id", $(this).val() + "input");
    });
});

Keep in mind, you can’t use $(“#inputID”) as that ID would change.

Updated fiddle