1

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?

Community
  • 1
  • 1
user2950105
  • 11
  • 1
  • 2

1 Answers1

2

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

azz
  • 5,852
  • 3
  • 30
  • 58
  • Hey Der Flatulator, Thank you for the quick response. What i understood so far is : You made a function with 2 variables, Info and Val. The info variable contains the custom text based on the values? The val variable im not so sure what it does but i think it gets the index you selected and print it as .innerHTML? If you could explain what is happening in your code i would be one step closer to where i want to be :D. Here you see i got more option tags http://jsfiddle.net/dUpnu/ Thank you so much for helping out. – user2950105 Nov 03 '13 at 16:29
  • @user2950105 (Apologies for the late response.) Of course, you are correct in that `info` is an array of text (or HTML) for each option tag. `val` is simply the `value` attribute of the currently selected option tag, so with your option tag: ``, `val` will be equal to `1`. The value is used to index into the array. – azz Nov 04 '13 at 08:28