javascript - 获取多选框的所有 id

Question

在此代码中，我可以将选项从左到右、从右到左移动。现在我需要从左侧框中获取所有 id。我该怎么做？

JS:

$("#moveright").click(function(){
       $("#country > option:selected").each(function(){
          $(this).remove().appendTo("#planets");
        });
    });

$("#moveleft").click(function(){
     $("#planets > option:selected").each(function(){
       $(this).remove().appendTo("#country");
     });
 });

HTML:

<div class="cover">
      <select id="country" multiple="multiple" name="country" >
       <option id="a">Afghanistan</option>
       <option id="b">Albania</option>
       <option id="c">Algeria</option>
       <option id="d">Andorra</option>
       </select>
   <input id="moveright" type="button" value="  >  " />
   <input id="moveleft" type="button" value="  <  " />
    <select id="planets" multiple="multiple" name="planets">
    </select>
  </div>

Answer 1

通过引入带有单击事件的按钮，它可能如下所示:

HTML

<button id="mybtn">get all id's (see console)</button>

JS

document.getElementById('mybtn').addEventListener('click', () => {
      const options = document.getElementById('country').options;
      for (let i = 0; i < options.length; i++) {
        console.log(options[i].id)
      }
    })

参见 fiddle :http://jsfiddle.net/omw9uqer/