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

Question

I'm creating a chrome extension that will simulate a click on a drop down element in the dom, and then click again on one of the options, according to the option I will pass as an argument. To clarify: I am not waiting for a click from the user, but want to create it myself, using the chrome extension. How can it be achieved? I didn't find any way. This is the relevant part of the 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>

And this it how I thought to do it in js (ignore the theHackCode, it simply gathers the code to be executed on the page with the chrome extension).

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

You need to try this,it will alter you label and value of droopdown.

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);
  }
});