基於div內容選擇/加亮選項

下面的代碼假設將下拉列表與div內容匹配。如果找到「Pineapple」，則選擇此選項。我似乎無法找到錯誤。基於div內容選擇/加亮選項

<head> 
<script> 
function displayResult(){ 

    var myObject=document.getElementById("mySelect"); 
    var myValue = $('#myContent').text(); 

    for(var i=0; i<myObject.length; i++){       
     if(myObject.options[i].text == myValue){ 
      myObject.options[i].selected = true; 
      (also tried - myObject.options[i].selectedIndex = i;) 
      break; 
     } 
    } 
} 
</script> 
</head> 

<body> 

<div id="myContent">Pineapple</div> 

<form> 
    Select your favorite fruit: 
    <select id="mySelect" size="4"> 
    <option>Apple</option> 
    <option>Orange</option> 
    <option>Pineapple</option> 
    <option>Banana</option> 
    </select> 
</form> 

<button type="button" onclick="displayResult()">Highlight Pineapple Option</button> 

</body>

注：

我想突出顯示的選項。錯過結尾括號是一個錯誤，更正。試過.selectedIndex = i，似乎沒有辦法。

來源

2012-12-21 user1824996

因爲不僅使用jQuery？ – alditis

jQuery one liner'$（「＃mySelect」）。val（$（'＃myContent'）。text（））;' – Musa

修復輸入錯誤很好http://jsfiddle.net/gaby/4FWAA/ –

您在函數結尾缺少}。

而且您應該包括jQuery庫或更改

var myValue = $('#myContent').text();

到

var myValue = document.getElementById('myContent').innerHTML;

一個更簡單的技巧來使用，雖然是（不是一個好招畢竟...參見@ RobG的評論）

function displayResult() { var myObject = document.getElementById("mySelect"); var myValue = document.getElementById('myContent').innerHTML; myObject.value = myValue; }

但IE的選項將需要包括value屬性

<option value="Pineapple">Pineapple</option>

來源

2012-12-21 02:16:49

問題爲「myObject.value = myValue;」：.value是發送到服務器的值，而不是div標籤之間的文本內容，是否正確？所以如果它被寫爲，它將是「P」。 – user1824996

即使使用值屬性，「簡單技巧」在IE 8或更低版本中也不起作用。最好使用'textContent || innerText「而不是innerHTML來獲取值。 – RobG

@RobG，謝謝你的提醒。 –

相反的：

> myObject.options[i].selected = true;

使用

myObject.selectedIndex = i;

設置所選屬性爲true不一定能使選擇該選項（它的瀏覽器之間變化）。

哦，你有一個語法錯誤：

<script> 
function displayResult(){ 

    var myObject=document.getElementById("mySelect"); 
    var myValue = $('#myContent').text(); 

    for(var i=0; i<myObject.length; i++){       
    ... 
    } 
    // missing closing } for function body 
</script>

來源

2012-12-21 02:14:02 RobG

你缺少右括號到displayResult。

來源

2012-12-21 02:14:15 0x499602D2

基於div內容選擇/加亮選項

回答

相關問題