как выбрать конкретный выпадающий элемент

Я хочу использовать эту функцию для работы со всеми моими выпадающими списками. Проблема: первый снимок работает нормально, но я пытаюсь выбрать любой вариант во 2-ом выпадающем списке. Он помещает значение из первой группы в промежуток второй группы. Я хочу, чтобы диапазон имел значение из собственной группы. Я хотел бы использовать это для нескольких групп.

  <script>function displayResult(xspan,xselect)
{
 var x=document.getElementById(xselect).selectedIndex;
 alert(x);
 var newTxt = document.getElementsByTagName("option")[x].value;

 document.getElementById(xspan).innerHTML = newTxt;
 //alert(document.getElementsByTagName("option").length);
}
</script>

<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
    <option value="">Phone  Numbers</option>
    <optgroup label="Shipping">
        <option value=" - 800-463-3339">FedEx</option>
        <option value=""></option>
    </optgroup>
</select>
<span id="ShowPhone"></span>

<select id="myParts" onchange="displayResult('ShowParts','myParts')">
    <option value="">Qik Parts list</option>
    <optgroup label="BATT">
        <option value="1">1</option>
        <option value="2">1</option>
        <option value="2">1</option>
        <option value="2"><1/option>
    </optgroup>
</select>
<span id="ShowParts"></span>