如何根据所选颜色更改下拉列表的背景颜色IN JAVASCRIPT？ [英] How to change color of background for dropdown list according to selected color IN JAVASCRIPT?

问题描述

 <   script  >  
  function  clrchange（）
 {
  document  .bgColor =  document  .getElementById（'  。S1' ）值; 
} 
 
  function  cha（）
 {
a =  document  .getElementById（'  s1'）。value; 
  if （a.getElementById（'  r1 '））
 {
  document  .getElementById（' < span class =code-string> r1'）。style.background =   red; 
} 
  else   if （a.getElementById（'  r2'））
 {
  document  .getElementById（'  r2'）。style.background =   green; 
} 
  else   if （a.getElementById（'  r3'））
 {
  document  .getElementById（'  r3'）。style.background = a; 
} 
} 
} 
 <   /   script  >  
 <  选择    id   =   s1   onchange   =   clrchange（） >  
 <  选项    id   =   r1   onmouseover   =   cha（） >  red <   / option  >  
 <  选项    id   =   r2   onmouseover   =   cha（） >  blue < span class =code-keyword><   / option  >  
 <  选项    id   =   r3   onmouseover   =   cha（） > 绿色<   / option  >  
 <  选择 >  

解决方案

您尚未定义任何值选项的c $ c>属性，但尝试读取代码中的值。

请提供值，否则请阅读选项 文本

您好。如果您正在尝试更改页面的背景颜色，那么您的代码将正常工作。

但是如果您尝试更改Dropdown的背景颜色而不是使用下面的代码

  function  clrchange（）
 {
  var  bgcolor =  document  .getElementById（'  S1' ）值; 
  document  .getElementById（'  s1').style.backgroundColor = bgcolor; 
} 

希望这会对你有帮助。

Javascript代码：

  function  clrchange（SelectedColor）
 {
 文档 .bgColor = SelectedColor; 
} 

 <  选择    id   =   s1   onchange  < span class =code-keyword> =  clrchange（this.value）; >  
 <  选项    id   =  r1 < span class =code-attribute>   onmouseover   =  cha（this.id，this.value）;    value  < span class =code-keyword> =  red >  red <   / option  >  
 <  选项    id   =  r2    onmouseover   =  cha（this.value）;    value   =  blue >  blue <   / option  >  
 <  选项    id   =  r3    onmouseover   =  cha（this.value）;    value   =  green > 绿色<   / option  >  
 <  选择 >  

<script>
function clrchange()
{
document.bgColor=document.getElementById('s1').value;
}

function cha()
{
a=document.getElementById('s1').value;
if(a.getElementById('r1'))
{
document.getElementById('r1').style.background="red";
}
else if(a.getElementById('r2'))
{
document.getElementById('r2').style.background="green";
}
else if(a.getElementById('r3'))
{
document.getElementById('r3').style.background=a;
}
}
}
</script>
<select id=s1 onchange=clrchange()>
<option id=r1 onmouseover=cha()>red</option>
<option id=r2 onmouseover=cha()>blue</option>
<option id=r3 onmouseover=cha()>green</option>
<select>

解决方案

You have not defined any value attribute for the options, but trying to read the value in code.
Please provide values, else read the option text.

Hi. If you are trying to change the background color of the page, than your code will work fine.
But if you are trying to change the background color of the Dropdown than use below code

function clrchange()
{
var bgcolor = document.getElementById('s1').value;
document.getElementById('s1').style.backgroundColor = bgcolor;
}

Hope this will help you.

Javascript Code:

function clrchange(SelectedColor)
{
    document.bgColor=SelectedColor;
}

<select id=s1 onchange="clrchange(this.value);">
<option id="r1" onmouseover="cha(this.id,this.value);" value="red">red</option>
<option id="r2" onmouseover="cha(this.value);" value="blue">blue</option>
<option id="r3" onmouseover="cha(this.value);" value="green">green</option>
<select>

这篇关于如何根据所选颜色更改下拉列表的背景颜色IN JAVASCRIPT？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！