Question

下面的代码假设将下拉列表与div内容相匹配。如果找到“Pineapple”，则选择此选项。我似乎无法找到错误。

<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 个答案: