我如何使用 <select onChange>更改页面内容的元素？

Question

I'm wondering if anyone has had any experience using the the following HTML element?

<select onChange="function()"></select>

I'm looking to add some functionality to a sports fixture page on a site I am currently building. I want the user to be able to select a round and within the containing area content appears depending on which round is selected from the option element.

I have an example of what I am exactly trying to achieve here . I have also had a look at the W3 Schools example. However due to my beginner level of knowledge and experience using JavaScript I am having some difficulties achieving what I'm looking for.

I have been searching solidly online and through the code of the AFL Fixture page but I just can't seem to find anything on how this can be achieved.

Any advice on how I can get this done would be greatly appreciated.

Thanking you in advance

Stu : )

Answer 1

Do you have any restrictions on any libraries you can use? Using jQuery you can do it quite simply by using

$('select').change(function(){ /* CODE HERE */ });

Check out this fiddle here: http://jsfiddle.net/pavkr/0k3ngfek/

EDIT: Updated fiddle with dataset: http://jsfiddle.net/pavkr/0k3ngfek/1/

Answer 2

What you wanna use is Ajax .

When onChange() is called, get the selected value from the function, and get the relative HTML content using $.ajax .

Then after the ajax call is completed, update the content using jqXHR.done() method.