Question

我有一行不同颜色的下拉列表，当选择列表时，我想将该行的文本颜色值更改为选择的值。每行都有一个下拉列表字段，每次用户选择下拉列表时，所有字段都会改变相同的颜色。

<html>
<head>

<script type="text/javascript">
     function updateTextColour(value) {
            if (dropdownList.value > 0) {
                dropdownList.style.color = 'red';
                //document.body.style.color = '#' + value;
        } }           
    </script>        
    <style type="text/css">.style1 {color: #FF0000;}</style
</head>
<body>
    <form>Change the text color: <br>
       <table>
       <tr>
    <td id="1" style="width:40px">1</td>
    <td id="1" style="width:180px" class="style7">
        <span class="style1"><span class="style1">           
        <select name="backGround" size="1" onChange="updateTextColour(this.value);"><!--changeColor(this.selected);"-->
            <option value="FF0400" style="color:red">[Red]</option>
            <option value="05EF00" style="color:Green">[Green]</option>
            <option value="0206FF" style="color:Blue">[Blue]</option>
            <option value="000000" selected>[black]</option>
        </select></span></span></td>
        <td "width:auto" class="style8">Need to change to color row 1</td>   
        <br><br></tr>
        <table> 
        <tr>
        <td id="2" style="width:40px">2</td>
        <td id="2" style="width:180px" class="style7">

        <span class="style1"><span class="style1">  
        <select name="backGround2" size="1" onChange="updateTextColour(this.value);"><!--changeColor(this.selected);"-->
            <option value="000000">[Black]</option>
            <option value="FF0400" style="color:red">[Red]</option>
            <option value="EFE800" style="color:Yellow">[Yellow]</option>
            <option value="05EF00" style="color:Green">[Green]</option>
            <option value="0206FF" style="color:Blue">[Blue]</option>
            <option value="FFFFFF" selected>[White]</option>
        </select></span></span> </td>
        <td "width:auto" class="style8">Need to change to color row 2</td>
        </tr>
        </table></table>
    </form>
</body>

Answer 1

您需要更改Javascript才能使其正常工作。

Working Solution

使用此Javascript

function updateTextColourrow1(value){        
     document.getElementsByClassName("style8")[0].style.color="#"+value;
} 
function updateTextColourrow2(value){
     document.getElementsByClassName("style8")[1].style.color="#"+value; 
}

我已经使用两个函数分别访问这两行。这也可以仅使用一个函数来完成。

Era800的 方法。

的 JS 的

function updateTextColour(sender) { var tempie = sender; //the dropdown list object //Find the table row of the dropdown list. while (tempie.parentNode.nodeName != 'TR') { tempie = tempie.parentNode; } //Get the selected color. var selectedColor = '#' + sender.value; //Set the row to the selected color. tempie.parentNode.style.color = selectedColor; }

在era800发布的脚本中需要进行一些细微的更改，您需要在“＃selectedvalue”前加上“＃”。

Working Solution

Answer 2

尝试将this代替this.value传递到updateTextColour。

示例：onChange="updateTextColour(this);"

并使用此JavaScript函数：

function updateTextColour(sender) {
    var tempie = sender; //the dropdown list object

    //Find the table row of the dropdown list.
    while (tempie.parentNode.nodeName != 'TR'){
        tempie = tempie.parentNode;
    }
    //Get the selected color.
    var selectedColor = sender.value;

    //Set the row to the selected color.
    tempie.parentNode.style.color = selectedColor;
}

在每行的下拉列表中更改选择时更改文本颜色

2 个答案: