CODEWITHSUNDEEP
javascripthtml
user3050375
user3050375

Reputation: 11

How to use document.getElementsByTagName(

I want to use this function to work on all my drop down lists. Problem: the first drop down works okay, but hen I try select any option in the 2nd drop down selections. It places the value from the first group in the span of the second group. I want the span to have the value from its own group. I would like to use this on multiple groups.

The code below does not work properly. the phone number display okay but when i try to select the parts, the value of the phone number is displayed, no matter what the selection is.

I want the phone number when i select phones, and parts when i select parts.

Thank you

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

Upvotes: 0

Views: 648

Answers (2)

RobG
RobG

Reputation: 147553

Mostly comments:

When you do:

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

then document.getElementsByTagName("option") returns all the options in the document, you probably only want the ones for the select in question. But the options for a select are available as a collection, so you can do:

selectElement.options[x].value;

But that is unnecessary unless you are dealing with very old browsers or IE where there are no value attributes. Just use selectElement.value.

Where you have:

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

you can instead do:

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

so that you pass the current value of the select directly to the function. Then the function can be:

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

Upvotes: 1

Jon Koops
Jon Koops

Reputation: 9301

This should work, though I haven't tested it.

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

Upvotes: 0

Related Questions