亮点DIV取决于选择框值

Question

我这里有一个选择选项，并有选择期权价值的相同内容的一个div

<select> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 

<div id="textvalue"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
</div> 

我想要做的是，每当我点击选择选项1，下面的div具有相同的文字将突出显示，

有人可以帮助我如何在jquery上编码吗？ 谢谢！

Answer 1

您可以使用CSS类将“高亮”样式应用于元素。从#textvalue中的所有元素中删除该类，然后过滤出包含所选值的<div>。你可以将课程添加回去。

将所有这些放在change事件处理程序中，以在您更改<select>时调用该功能。

（选用）触发change事件您<select>在页面加载，调用该函数：

$('select').on('change', function(){ 
    $('#textvalue div').removeClass('highlight').filter(':contains('+this.value+')').addClass('highlight'); 
}).change(); 

JSFiddle

---

如果<div>值不是不同的，你将不得不去关于使用.filter()不同的方式：

$('select').on('change', function(){ 
    var value = this.value; 
    $('#textvalue div').removeClass('highlight').filter(function(){ 
     return this.innerHTML == value; 
    }).addClass('highlight'); 
}).change(); 

JSFiddle

Answer 2

您可以使用jQuery：（DEMO）

$('#textvalue > div').each(function() { 
var text = $(this).text(); 
$(this).attr('data-tx', text); 
}); 

$('select').on('change', function() { 
var selected = $(this).find(':selected').html(); 
$('#textvalue').find('div[data-tx=' + selected + ']').css({'background-color':'red'}); 
}) 

Answer 3

你4步需要什么：从所选择的选项

Within a multi select, I need to be able to get the value of the currently selected option

1. 获得价值

2. 选择使用JQuery eq法正长格

   Define jQuery "eq"

3. 添加一类在div

   jquery add remove class

4. 添加CSS代码风格你的类像下面：

   。高亮显示背景颜色：黄色; }

希望这有助于！