Javascript 从所选选项动态生成文本

选项一按预期工作，但我的第二个选项似乎不起作用，并且不明白为什么不起作用

非常感谢您的帮助

JavaScript：

$(window).load(function() {
var enabled = true;

    function calculation(e) {
        // Colors
        $("select#colors").each(function() {
            if ($(this).val() === 'Black') {
                enabled = true;
                $('span#1').text('0');
            }
            if ($(this).val() === 'Brown') {
                enabled = true;
                $('span#1').text('1');
            }
            if ($(this).val() === 'Red') {
                enabled = true;
                $('span#1').text('2');
            }
            if ($(this).val() === 'Orange') {
                enabled = true;
                $('span#1').text('3');
            }
            if ($(this).val() === 'Yellow') {
                enabled = true;
                $('span#1').text('4');
            }
            if ($(this).val() === 'Green') {
                enabled = true;
                $('span#1').text('5');
            }
            if ($(this).val() === 'Blue') {
                enabled = true;
                $('span#1').text('6');
            }
            if ($(this).val() === 'Violet') {
                enabled = true;
                $('span#1').text('7');
            }
            if ($(this).val() === 'Grey') {
                enabled = true;
                $('span#1').text('8');
            }
            if ($(this).val() === 'White') {
                enabled = true;
                $('span#1').text('9');
            }
            return false;
        });

        $("select#digits").each(function() {
            if ($(this).val() === 'Black') {
                enabled = true;
                $('span#2').text('0');
            }
            if ($(this).val() === 'Brown') {
                enabled = true;
                $('span#2').text('1');
            }
            if ($(this).val() === 'Red') {
                enabled = true;
                $('span#2').text('2');
            }
            if ($(this).val() === 'Orange') {
                enabled = true;
                $('span#2').text('3');
            }
            if ($(this).val() === 'Yellow') {
                enabled = true;
                $('span#2').text('4');
            }
            if ($(this).val() === 'Green') {
                enabled = true;
                $('span#2').text('5');
            }
            if ($(this).val() === 'Blue') {
                enabled = true;
                $('span#2').text('6');
            }
            if ($(this).val() === 'Violet') {
                enabled = true;
                $('span#2').text('7');
            }
            if ($(this).val() === 'Grey') {
                enabled = true;
                $('span#2').text('8');
            }
            if ($(this).val() === 'White') {
                enabled = true;
                $('span#2').text('9');
            }
            return false;
        });
    }

    $(document).ready(function(e) { 
        calculation(e);
    });

    $(document).change(function(e) { 
        calculation(e);
    });
});

您已将

id=“digits”

添加到

下的

中

第二波段

应该是

<select id="digits">
<option>2nd Band</option>

第二波段

更改

            <select>
                <option id="digits">2nd Band</option>

第二波段

致：

第二波段

我对您的代码做了一些更改，使其更加简单

HTML

 <th>
    <select id="colors">
        <option value="" required>1st Band</option>
        <option style="background:black; color:white;" value="0">Black</option>
        <option style="background:brown; color:white;" value="1">Brown</option>
        <option style="background:red; color:white;" value="2">Red</option>
        <option style="background:orange; color:white;" value="3">Orange</option>
        <option style="background:yellow; color:black;" value="4">Yellow</option>
        <option style="background:green; color:white;" value="5">Green</option>
        <option style="background:blue; color:white;" value="6">Blue</option>
        <option style="background:violet; color:black;" value="7">Violet</option>
        <option style="background:grey; color:white;" value="8">Grey</option>
        <option style="background:white; color:black;" value="9">White</option>
    </select>
</th>
<th>
    <select id="digits">
        <option  value="" required>2nd Band</option>
        <option style="background:black; color:white;" value="0">Black</option>
        <option style="background:brown; color:white;" value="1">Brown</option>
        <option style="background:red; color:white;" value="2">Red</option>
        <option style="background:orange; color:white;" value="3">Orange</option>
        <option style="background:yellow; color:black;" value="4">Yellow</option>
        <option style="background:green; color:white;" value="5">Green</option>
        <option style="background:blue; color:white;" value="6">Blue</option>
        <option style="background:violet; color:black;" value="7">Violet</option>
        <option style="background:grey; color:white;" value="8">Grey</option>
        <option style="background:white; color:black;" value="9">White</option>
    </select>
</th>

---

如果您稍微修改HTML结构，您可以非常简化代码

<select id="colors">
    <option>1st Band</option>
    <option style="background:black; color:white;" value="0">Black</option>
    <option style="background:brown; color:white;" value="1">Brown</option>
    ...........

只需在此处查看工作演示：

---

为什么要在id选择器上使用

。每个
？ID应该是唯一的。
 <th>
    <select id="colors">
        <option value="" required>1st Band</option>
        <option style="background:black; color:white;" value="0">Black</option>
        <option style="background:brown; color:white;" value="1">Brown</option>
        <option style="background:red; color:white;" value="2">Red</option>
        <option style="background:orange; color:white;" value="3">Orange</option>
        <option style="background:yellow; color:black;" value="4">Yellow</option>
        <option style="background:green; color:white;" value="5">Green</option>
        <option style="background:blue; color:white;" value="6">Blue</option>
        <option style="background:violet; color:black;" value="7">Violet</option>
        <option style="background:grey; color:white;" value="8">Grey</option>
        <option style="background:white; color:black;" value="9">White</option>
    </select>
</th>
<th>
    <select id="digits">
        <option  value="" required>2nd Band</option>
        <option style="background:black; color:white;" value="0">Black</option>
        <option style="background:brown; color:white;" value="1">Brown</option>
        <option style="background:red; color:white;" value="2">Red</option>
        <option style="background:orange; color:white;" value="3">Orange</option>
        <option style="background:yellow; color:black;" value="4">Yellow</option>
        <option style="background:green; color:white;" value="5">Green</option>
        <option style="background:blue; color:white;" value="6">Blue</option>
        <option style="background:violet; color:black;" value="7">Violet</option>
        <option style="background:grey; color:white;" value="8">Grey</option>
        <option style="background:white; color:black;" value="9">White</option>
    </select>
</th>

function calculation() {
    // Colors
    $("select#colors").each(function() {
        var color = $(this).val();
        if(!color)
          return;
        $('span#1').text(color);    
    });

    $("select#digits").each(function() {
        var color = $(this).val();
        if(!color)
          return;
        $('span#2').text(color);
    });
}
$(document).ready(function() { 
    calculation();
});
$(document).change(function(){
   calculation();
});

<select id="colors">
    <option>1st Band</option>
    <option style="background:black; color:white;" value="0">Black</option>
    <option style="background:brown; color:white;" value="1">Brown</option>
    ...........

    $("select#colors").each(function() {            
    $('span#1').text($(this).val());
});