亮點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代碼風格你的類像下面：

   。高亮顯示背景顏色：黃色; }

希望這有助於！