Changer div id en javascript variable

Ok alors, j'utilise le code ci-dessous qui fonctionne bien. L'option sélectionnée se trouve dans la variable: 'val'. Mais maintenant je veux changer le div id. Alors, comment puis-je modifier la valeur de 'var_div' dans la valeur de '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> 

Vous pouvez faire quelque chose d'aussi simple que

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

Mais vous pouvez également regarder dans un cadre tel que jquery. Ce qui, si vous allez faire beaucoup de choses comme ça, va rendre votre vie beaucoup plus facile!

Que dis-tu de ça…

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

… avec jQuery …

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

J'espère que ça aide.
Hristo

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

Modifier:

En passant, vous voudrez stocker l'identifiant de l'élément ailleurs, afin que vous sachiez quel identifiant rechercher la prochaine fois que vous souhaitez le modifier. Si vous ne le faites pas, ce code ne fonctionnera qu'une seule fois. Si vous souhaitez prendre en charge la modification de l'ID à plusieurs reprises, vous voudrez peut-être faire quelque chose comme ceci:

 <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> 

Vous pouvez le faire si vous devez:

 <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> 

Modifiez la propriété id de l'élément après l'avoir sélectionné en utilisant Javascript.

Si cette div est la seule sous la forme comme montrée, donc c'est facile comme ça

  <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> 

J'ai fait de manière dynamique le div non par identifiant car l'ID sera modifié par la modification de la balise de sélection, puis modifie l'ID en tant que valeur de l'option

Mais s'il existe d'autres divs dans la forme, nous devons définir un attribut dans cette div comme

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

Puis relancez les divs et lisez-le et changez l'identifiant

 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; } } } } 

Cela dit, Cordialement, marquez cette réponse comme correcte si cela vous est utile 🙂