当相关的下拉值发生变化时,我希望突出显示带有颜色的标签。
<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中完成这一任务?
任何建议都非常感谢。
发布于 2014-07-08 11: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
})
})
发布于 2014-07-08 11: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;
}
https://stackoverflow.com/questions/24639952
复制相似问题