javascript - 当下拉列表中的项目发生变化时突出显示标签的简洁方法？

Question

我想在关联的下拉值更改时用颜色突出显示标签。

<tr>
    <td>
        <select id="first_dd" data-bind="value: first">
            <option>cat</option>
            <option>dog</option>
            <option>squirrel</option>
            <option>birds</option>
        </select>
    </td>
    <td>
        <label id="first_lb">
            soft</label>
    </td>
</tr>
<tr>
    <td>
        <select id="second_dd" data-bind="value: second">
            <option>lion</option>
            <option>elephant</option>
            <option>kangaroo</option>
            <option>buffalo</option>
        </select>
    </td>
    <td>
        <label id="second_lb">
            dangerous</label>
    </td>
</tr>

我想在用户更改 first_dd 项时更改 first_lb 的颜色。

我怎样才能用更少的代码在 JavaScript/jQuery 中完成这个任务？

非常感谢任何建议。

Answer 1

所以，这里是“更少的代码”。 将更改事件处理程序添加到select。

试试这个:

$("#first_dd").change(function(){
   $("#first_lb").css('color',"yellow");
});

<强> DEMO

编辑:

由于您的问题仅询问 first_dd 和 first_lb，因此我仅添加了该部分的代码。要将其应用于所有 select，请使用 jquery .each()。

如果您动态添加元素，则必须使用 on 绑定(bind)事件，否则使用 .change() 就足够了。

因此，当您提到您的要求时，请执行以下操作:

$('select').each(function(){         //for each select elements in document
    $(this).on('change',function(){  //bind change event
        var id = $(this).attr('id').replace('dd','lb'); //get id for label
        $("#"+id).css("color","yellow"); //highlight
    })
})

<强> DEMO