<select id = "Testing" onchange = Selected("'.$Variable.'")> <option>1</option> <option>2</option> <option>3</option> Independientemente de lo seleccionado, su valor se almacenará en $Varaiable y se iniciará la función Selected() .
Si se selecciona <option>2</option> , Selected() tiene que cambiar el color de fondo de <div class = "2">
function Selected(Data) { var Temp = document.getElementsByClassName(Data); Temp.style.backgroundColor = "#ffffff"; alert(Data); } cada vez que depuro el código, dice Cannot set properties of undefined . ¿Estoy declarando los getElements incorrectamente?
si desea cambiar los colores de varios elementos, use document.querySelectorAll() en su lugar y lance cada elemento y cambie el color así
div.forEach(d => { d.style.backgroundColor = color; })y quitar esta parte
div.style.backgroundColor = color; const select = document.getElementById("select"); function changeColor(color) { const divId = select.value; const div = document.getElementById(divId); div.style.backgroundColor = color; } <select id="select" onchange="changeColor('red')"> <option value="">Select div to change color</option> <option value="div-1">div 1</option> <option value="div-2">div 2</option> </select> <div style="display: flex; height: 100px" id="div-1">Dev 1</div> <div style="display: flex; height: 100px" id="div-2">Dev 2</div>Primero tienes que hacer eco de la variable php de los valores en las opciones. Supongo que tu código es algo como esto:
<select id="comboA" onchange="Selected(this)"> <option value="">Select combo</option> <option value="<?php echo $Value1 ?>">Text1</option> <option value="<?php echo $Value2 ?>">Text2</option> <option value="<?php echo $Value3 ?>">Text3</option> </select>Al cambiar, llama a la función de JavaScript con el elemento de selección como este. En la función, puede leer el valor seleccionado como atributo de valor del elemento de selección. getElementsByClassName devuelve una HTMLCollection. Ha iterado a través de la colección, incluso si contiene solo un elemento. En el ejemplo, se registra en la consola.
function Selected(selectObject) { var value = selectObject.value; var TempList = document.getElementsByClassName(value); console.log(TempList) ; for (var i=0; i < TempList.length; i++) { TempList[i].style.backgroundColor = "#ffff00"; } alert(value); } <select id="comboA" onchange="Selected(this)"> <option value="">Select combo</option> <option value="div1">Text1</option> <option value="div2">Text2</option> <option value="div3">Text3</option> </select> <div class="div1">Container 1</div> <div class="div2">Container 2</div> <div class="div3">Container 3</div>También puede usar getElementById si solo hay un contenedor div. Establezca el atributo id en lugar del nombre de la clase. En el código js, no tiene que iterar a través de la HTMLCollection resultante.
function Selected(selectObject) { var value = selectObject.value; var Temp = document.getElementById(value); Temp.style.backgroundColor = "#ffff00"; } <select id="comboA" onchange="Selected(this)"> <option value="">Select combo</option> <option value="div1">Text1</option> <option value="div2">Text2</option> <option value="div3">Text3</option> </select> <div id="div1">Container 1</div> <div id="div2">Container 2</div> <div id="div3">Container 3</div>Si solo se debe colorear el contenedor div seleccionado, debe desactivar el color de fondo de todos los demás. Tome un nombre de clase para todos los contenedores div, selecciónelos y coloréelos como en el primer ejemplo, luego coloree el seleccionado con uno de los métodos.