0

下面的代码假设将下拉列表与 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，似乎没有奏效。

4

3 回答 3

0

代替：

> 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>
于 2012-12-21T02:14:02.210 回答
0

您缺少displayResult.

于 2012-12-21T02:14:15.913 回答
0

您}在函数末尾缺少 a 。

你应该包括 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-21T02:16:49.107 回答