当下拉列表中的项目发生变化时，突出显示标签的简洁方法？
当下拉列表中的项目发生变化时，突出显示标签的简洁方法？
提问于 2014-07-08 19:14:50
当相关的下拉值发生变化时，我希望突出显示带有颜色的标签。
<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中完成这一任务？
任何建议都非常感谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-07-08 19:17:38
所以，这里有“更少的代码”。向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
})
})Stack Overflow用户
发布于 2014-07-08 19:19:47
使用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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24639952
复制相关文章
相似问题
腾讯云开发者
