Ok so now I am using the code below which works fine. The selected option is in the variable:'val' . but now I want to change the div id. So how do I change the value of 'var_div' into the value of 'val'?

 <form name="form1" method="POST">
    <select name="select1" onchange="updatevariable(this)">
    <option value="div2" >2</option>
    <option value="div15" >15</option>
    </select>
    </form>

    <script type="text/javascript">
    function updatevariable(elm) {
    val = elm.options[elm.selectedIndex].value;
    window.alert(val);
    }
    </script>

    <div id='var_div'>
    </div>

Ok so now I am using the code below which works fine. The selected option is in the variable:'val' . but now I want to change the div id. So how do I change the value of 'var_div' into the value of 'val'?

 <form name="form1" method="POST">
    <select name="select1" onchange="updatevariable(this)">
    <option value="div2" >2</option>
    <option value="div15" >15</option>
    </select>
    </form>

    <script type="text/javascript">
    function updatevariable(elm) {
    val = elm.options[elm.selectedIndex].value;
    window.alert(val);
    }
    </script>

    <div id='var_div'>
    </div>

• javascript
• html

5 Answers 5

How about this...

document.getElementById("var_div").setAttribute("id", val);

... with jQuery...

$('#var_div').attr('id',val);

I hope this helps.
Hristo

You can do something as simple as

document.getElementById('var_div').setAttribute('id',val)

But you may also want to look into a framework such as jquery. Which, if you are going to be doing a lot stuff like this, is going to make your life a lot easier!

document.getElementById("var_div").id = val;

Edit:

By the way, you'll want to store the id of the element somewhere else so that you'll know what id to look for the next time you want to change it. If you don't, this code will only work once. If you want to support changing the ID repeatedly, you might want to do something like this:

<script type="text/javascript">
    var currentDivId = "var_div";

    function updatevariable(elm) {
        val = elm.options[elm.selectedIndex].value;
        window.alert(val);
        var divElement = document.getElementById(currentDivId);
        divElement.id = val;
        currentDivId = val;
    }
</script>

You can do that, if you need to:

<div id="test"></div>
<script type="text/javascript">
var elem = document.getElementById("test");
alert(elem.id);
elem.id = "test2";
alert(document.getElementById("test2").id);
</script>

Change the id property of the element after you have selected it using Javascript.

if this div is the only one in the form as show so its easy like this

 <form name="form1" method="POST">
    <select name="select1" onchange="updatevariable(this)">
    <option value="div2" >2</option>
    <option value="div15" >15</option>
    </select>
    </form>

    <script type="text/javascript">
    function updatevariable(elm) {
    document.getElementByTagNames('DIV')[0].id= elm.options[elm.selectedIndex].value;
    }
    </script>

    <div id='var_div'>
    </div>

i did dynamicly get the div not by id because the id will be change by the change of the select tag and then change the id as the value of the option

but if there is other divs in the form so we need to set an attribute to this div just like

  <div id='var_div' changeId="true">
    </div>

and then loop over the divs and pic it up and change the id

function updatevariable(elm) {
var divs =   document.getElementByTagNames('DIV');
   for(var i =0;i<divs.length;i++)
     {
      if(divs[i].getAttribute('changeId')!=null) {
        if(divs[i].getAttribute('changeId')=="true"){
              divs[i].id=elm.options[elm.selectedIndex].value;
             }
           }
      }
  }

that said Regards Please mark this answer as correct one if it ben useful to you :)