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_lb项目时更改first_dd的颜色。

如何使用更少的代码在javascript/jQuery中完成此操作？

高度赞赏任何建议。

Answer 1

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

试试这个：

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

<强> DEMO

修改

由于您的问题仅针对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 }) })

<强> DEMO

Answer 2

利用 for 属性将标签与相关的选择 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;
}

javascript - 在下拉列表中的项目更改时突出显示标签的简洁方法？

2 个答案: