Loading Html Files With Dropdowns Using Jquery

I am using jQuery .load to load different HTML files into my webpage using a dropdown menu. Each dropdown selection calls the corresponding file. My target div is

With regard to your question, the technique you're looking for is called 'Don't Repeat Yourself', or DRY for short. To achieve it in this case you can hook the change event handler and use get a reference to the select from the Event object passed to the handler. You can amend the HTML to store the URL in the value attribute and then provide it as the argument to load(), like this:

<formname="courseCalc"><selectname="myCourses"id="courses"><optionselected>Please Select...
      <optionvalue="includes/inc_1.html">Item 1</option><optionvalue="includes/inc_2.html">Item 2</option><!-- ... --><optionvalue="includes/inc_50.html">Item 50</option></select></form>

jQuery($ => {
  $('#courses').on('change', e => {
    $('#targetPane').load(e.target.value);
  });
});

Note that I added an id to the select element to make it easier to retrieve the element in the example, but any selector would work.

Share