Question

我正在创建一个Chrome扩展程序，它将模拟dom中下拉元素的点击，然后根据我将作为参数传递的选项再次单击其中一个选项。澄清：我不是在等待用户点击，而是想自己创建，使用chrome扩展。如何实现？我找不到任何办法。这是html的相关部分：

<select class="select select-step-type" name="select-step-type" data-rel="tooltip" title="" data-original-title="Edit Step">
<optgroup label="Select a step type">
  <option value="warmup" data-step-type="workout-step-warm" class-name="">
      Warm up
  </option>
  <option value="interval" data-step-type="interval" class-name="workout-step-run" selected="">
      Run
  </option>
  <option value="recovery" data-step-type="workout-step-recover" class-name="">
      Recover
  </option>
  <option value="rest" data-step-type="workout-step-rest" class-name="">
      Rest
  </option>
  <option value="cooldown" data-step-type="workout-step-cool" class-name="">
      Cool down
  </option>
  <option value="other" data-step-type="workout-step-other" class-name="">
      Other
  </option>
</optgroup>

这就是我想在js中做的事情（忽略theHackCode，它只是收集要在带有chrome扩展名的页面上执行的代码）。

var theHackCode = "document.getElementsByClassName('select-step-type')[0].click(); ";
theHackCode += "document.getElementsByClassName('select-step-type')[0].options[4].click(); ";
chrome.tabs.executeScript(null, {code: theHackCode}, function(results) {
   console.log(results);
});

Answer 1

你需要试试这个，它会改变你的标签和下垂的价值。

document.addEventListener('DOMContentLoaded', function () { 
  var obj = document.getElementsByClassName('select-step-type');
  for (var i = 0; i < obj.length; i++) {
        obj[i].addEventListener('change', function(){
        alert(this.options[this.selectedIndex].value+"\n"+this.options[this.selectedIndex].text);
    }, false);
  }
});

单击选择元素，然后单击选项

1 个答案: