根據div內容選擇/突出顯示選項

Question

下面的代碼假定將下拉列表與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，似乎沒有解決問題的辦法。

Answer 1

代替：

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

采用

myObject.selectedIndex = i;

將selected屬性設置為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>

Answer 2

您缺少displayResult括號。

Answer 3

您在函數末尾缺少} 。

而且您應該包括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>

根據div內容選擇/突出顯示選項

問題描述

3 個解決方案

解決方案1
0 2012-12-21 02:14:02

解決方案2
0 2012-12-21 02:14:15

解決方案3
0 已采納 2012-12-21 02:16:49

根據div內容選擇/突出顯示選項

問題描述

3 個解決方案

解決方案1 0 2012-12-21 02:14:02

解決方案2 0 2012-12-21 02:14:15

解決方案3 0 已采納 2012-12-21 02:16:49

解決方案1
0 2012-12-21 02:14:02

解決方案2
0 2012-12-21 02:14:15

解決方案3
0 已采納 2012-12-21 02:16:49