当下拉菜单中的项目发生变化时，以简洁的方式突出显示标签

Concise way to highlight label when items in dropdown changes?

本文关键字：简洁 方式突 显示 标签 变化 下拉菜单 项目      更新时间：2023-09-26

我想在相关的下拉值发生变化时用颜色突出显示标签。

<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中完成这一点?

所以，这里是"less code"。为select添加更改事件处理程序

试试这个:

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

编辑:

因为你的问题只要求first_dd和first_lb，所以我只为那部分添加了代码。要将此应用于所有select使用jquery .each() .

如果你动态添加元素，那么你必须使用on来绑定events，否则使用.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
    })
})

使用for属性来连接标签和相关的select dom元素，如

<select id="first_dd" data-bind="value: first">
    <option>cat</option>
    <option>dog</option>
    <option>squirrel</option>
    <option>birds</option>
</select>
<label for="first_dd">soft</label>

添加JS来检测更改并添加类

$('select').each(function(){
    $(this).on('change',function(){
        $('label[for="'+$(this).attr('id')+'"]').addClass('changed')
    })
})

和添加适当的CSS改变类

.changed {
   color: #000;
}
相关文章：