根据选择框值突出显示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的{​​{1}}事件，以调用该函数：

<select>

JSFiddle

---

如果$('select').on('change', function(){ $('#textvalue div').removeClass('highlight').filter(':contains('+this.value+')').addClass('highlight'); }).change(); 值不明显，则必须以不同的方式使用<div>：

.filter()

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步：

1. 从所选选项中获取值

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

2. 使用JQuery eq方法

   选择n长度div

   Define jQuery "eq"

3. 在div中添加一个类

   jquery add remove class

4. 添加css代码来为您的类设置样式，如下所示：

   .highlighted {   背景颜色：黄色; }

希望这有帮助！