Change DIV id with javascript

Question

Trying to change the div id="test" to the value from the dropdown option selected using javascript. I have a jsfiddle started. If user selects 2013 then the div id="test" should change to div id="2013" and show the second dropdown of months. The value from the year dropdown will ultimately be used to query the database for the actual months recorded in that year but for now I'm interested in changing the div id and storing the value for later use.

<div class="report_select" id="style_container_div">
    <label>Year:</label>
    <select size="1" id="year" title="" type="select" name="style">
        <option value="">Select Year</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
    </select>
    <div class="clear"></div>
    <div id="error-message-style"></div>
</div>
<div id="test" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label>Select a Month:</label>
    <select>
        <option value=""></option>
        <option value="January">January</option>
        <option value="February">February</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="August">August</option>
        <option value="September">September</option>
        <option value="October">October</option>
        <option value="November">November</option>
        <option value="December">December</option>
    </select>
</div>
    <script type="text/javascript">
    $("#year").change(function () {
    var targID = $(this).val();
    $("div.style-sub-1").hide();
    $('#' + targID).show();

})

$("div.style-sub-1 select").change ( function () {
    $("div.style-sub-2").hide ();
    document.getElementById("test").setAttribute("id", targID);
    $('#' + targID).show ();
} )
    </script>

Answer 1

If you really want the pure JavaScript option:

document.getElementById("test").id = "2013";

I also noticed that:

$("div.style-sub-1 select").change ( function () {
    $("div.style-sub-2").hide ();
    document.getElementById("test").setAttribute("id", targID);
    $('#' + targID).show ();
} );

Is not going to trigger in your code as it is. Did you mean to change the ID in the other .change() function?

Answer 2

Note that you use jQuery instead of document.getElementById("id") you can do simply $("#id"), and instead of .setAttribute you can do .attr('attr', 'attrVal').

Because the id of $("#test") will be changed a solution would be to change the id of select parent.

// on change
    var $this = $(this);
    $this.parent().attr("id", $this.val());

But instead of changing the id, I recommend you to use a data-attr.

<div id="test" data-value="test">...</div>

And then to set it:

$("#test").attr("data-value", $this.val());

Answer 3

I updated your JsFiddle. I changed your Javascript to reflect the following:

$("select#year").on('change', function () {
    var targID = $(this).val();
    $("div.style-sub-1").hide();
    $('#' + targID).show();
})

$("select#year").on('change', function () {
    var tarID  = $(this).val();
    $('#test').attr('id', tarID); // document.getElementById("test").setAttribute("id", targID);
    $("div.style-sub-2").hide ();
    $('#' + tarID).show ();
} )

However, this will not change the ID of test after it's changed. You'll have to create a function to keep track of this but it shouldn't be too difficult.

Answer 4

targID there is no variable in this method.

$("div.style-sub-1 select").change ( function () {
    $("div.style-sub-2").hide ();
    document.getElementById("test").setAttribute("id", targID); //  error
    $('#' + targID).show ();
});

from your code, it seems you're already using using jQuery therefore try it in

$('#test').prop("id","yourId");