Как использовать document.getElementsByTagName (

Question

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

Код ниже не работает должным образом. номер телефона отображается нормально, но когда я пытаюсь выбрать детали, отображается номер телефона, независимо от того, какой выбор.

Я хочу номер телефона, когда я выбираю телефоны, и детали, когда я выбираю детали.

Спасибо

<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> 

Answer 1

В основном комментарии:

Когда вы делаете:

var newTxt = document.getElementsByTagName("option")[x].value; 

затем document.getElementsByTagName("option") возвращает все параметры в документе, вы, вероятно, хотите только те, для выбора в вопросе. Но варианты отборного доступны как коллекции, так что вы можете сделать:

selectElement.options[x].value; 

Но это не является необходимым, если вы имеете дело с очень старыми браузерами или IE, где нет никаких признаков значения. Просто используйте selectElement.value.

Где у вас есть:

<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')"> 

вы можете вместо этого сделать:

<select id="myPhones" onchange="displayResult('ShowPhone', this.value)"> 

так что вы передаете текущее значение избранных непосредственно к функции. Тогда функция может быть:

function displayResult(id, value) { 
    document.getElementById(id).innerHTML = value; 
} 

Answer 2

Это должно работать, хотя я не проверял.

function displayResult(spanId, selectId) { 
    document.getElementById(spanId).innerHTML = document.getElementById(selectId).value; 
}