當選擇輸入鼠標懸停結果時顯示div

Question

我有選擇輸入與一些結果和「idresult」爲每個。 當鼠標懸停idresult = 1時，我想顯示jquery div 1，當鼠標懸停idresult = 2時顯示div 2，等等...並隱藏最後一個顯示的div。 有什麼想法？

HTML腳本：

<select id="myselect"> 
<option idresult="1" value="Value test 1">TEST 1</option> 
<option idresult="2" value="Value test 2">TEST 2</option> 
<option idresult="3" value="Value test 3">TEST 3</option> 
</select> 

<div id="1" style="display:none;">Div with information for idresult=1</div> 
<div id="2" style="display:none;">Div with information for idresult=2</div> 
<div id="3" style="display:none;">Div with information for idresult=3</div> 

jQuery腳本：

$('#myselect').on('mouseover', function() { 
    var myidselect=$(this).attr("idresult"); 
    $(myidselect).show(); // display the div in relation with select result 
}); 

Answer 1

首先不使用隨機屬性雜亂DOM，使用data-代替。

最後，你會得到字符串值，但從不將它作爲有效的選擇器傳遞給Sizzle（jQuery的選擇器引擎）。您需要#預先考慮字符串如下：

$('#myselect').on('mouseover', function() { 
 
    var myidselect = $(this).children('option:selected').data("idresult"); 
 
    $('#'+myidselect).show().siblings('div').hide(); // display the div in relation with select result 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect"> 
 
<option data-idresult="1" value="Value test 1">TEST 1</option> 
 
<option data-idresult="2" value="Value test 2">TEST 2</option> 
 
<option data-idresult="3" value="Value test 3">TEST 3</option> 
 
</select> 
 

 
<div id="1" style="display:none;">Div with information for idresult=1</div> 
 
<div id="2" style="display:none;">Div with information for idresult=2</div> 
 
<div id="3" style="display:none;">Div with information for idresult=3</div>

請注意，我們需要使用$(this).children('option:selected').data("idresult")因爲data-屬性分配給<select>內<option>元素。

另請注意，我們使用siblings('div').hide()隱藏先前顯示的<div>元素。但是您可能希望使用類名或其他一些機制來識別這些信息div，以實現更好的可移植性。