CODEWITHSUNDEEP
javascripthtml
user2950105
user2950105

Reputation: 11

Javascript Select Value Load

I made a table with a dropdown menu.

<tr>
    <td>items</td>
    <td><select id="afewitems">
        <option value="0">Select</option>
        <option value="1">item1</option>
        <option value="2">item2</option>
    </td></select>
</tr>

With javascript (not jQuery) i want to dynamicly load items on the screen based on the selection. Example: when i select item1 (value="1") i want extra information loaded on the webpage based on the selection. (text and/or images)

I found this on the site: Adding additional data to select options using jQuery http://jsfiddle.net/GsdCj/2/

So my question is: How can i load pre-written information in Java based on Select ID/Value?

Upvotes: 1

Views: 3704

Answers (1)

azz
azz

Reputation: 5930

Make use of the onchange HTML <select> attribute.

<select id="afewitems" onchange="changeInfo(this)">
<!--  (option tags) -->
<div id="info"></div>

JavaScript:

function changeInfo(el) {
    var info = [ 
        "some text",       // option 0
        "something else",  // option 1
        "..."              // option 2
    ];
    var val = el.options[el.selectedIndex].value;
    document.getElementById('info').innerHTML = info[val];
}

jsFiddle

Here's a modification for multiple <select> tags.

jsFiddle

Upvotes: 2

Related Questions