JSFiddle - React, Tailwind, and code Playground

HTML

<select multiple name="selectItems" size="6" id="selectItems">
        <option value="option1">Value1</option>
        <option value="option2">Value2</option>
        <option value="option3">Value3</option>
  </select>

 <!-- Passing through ID.selectedOptions to function -->
 <input type="button" id="opener" value="Clickme" onclick="showtables( document.getElementById('selectItems'), 'getquery.php' );">
     
<br />
<div id="results"></div>

CSS

#results {
    font-size: 12px;
    margin-top: 5px;
}

JavaScript

function showtables( selectObj, page ) {
    var xmlhttp = new XMLHttpRequest();
    var str = "";
    var AllOptions = selectObj.options;
    var SelectedOptions = selectObj.selectedOptions;
 
    /**
      *  Iterate through each Option
      *  From here you can pick out:
      *      - id name
      *      - value
      *  etc, to form a query string 
     **/
    for ( var x = 0; x < AllOptions.length; x++ ) {
        str +=  "&" + AllOptions[x].value + "=" + AllOptions[x].textContent;
    }
    
    document.getElementById('results').textContent = str;
    

    /** 
     *    if apples & shaz.. selected   
     *    str now contains:
     *        &value1=Apples&vsalue2=shazbots
    **/
    console.log( str );
    
    xmlhttp.open("GET", page + "?q=" + str, true);
    xmlhttp.send();
}