Adding two selections to open specific content?

I’m trying to piece together a little personal project of mine. I have absolutely no idea what I’m doing as my knowledge is of only very basic HTML and CSS. Hopefully you can bear with me on this and help me out.

Ideally, I’d like two lists side by side of items. Lets call them “Column A” and “Column B”. Each of the column has 10 choices. These can either be selectable buttons or two drop downs. Either or doesn’t make much difference to me. Whichever is easiest really.

Lets say you select “A4” and “B6”, I’d like it top then display certain info below it. Info would include picture/link/and ideally a youtube video embed.

I don’t know really what to do. I remember from my basics of HTML FOREVER ago, Iframes and embedding a “page” into a page. Would this be feasible in this application? To somehow make the combo of selections equal opening up the specified page in an Iframe below? If so, how do you assign two selections to be added like that?

Another thought that seems even more daunting to me who knows nothing about them… Would there be a way of making the two selections pull from a MySQL database that stores all the content I’d like to be loaded?

I appreciate every bit of help you guys can provide. Hopefully I was able to convey what I’m picturing in my head well enough.

I’ve been doing some research, and I think I found some info that will help out. It seems Iframes are really not an ideal way to do it, although it would technically work. Instead, I found I can use Ajax to do similar and load my new “page” within the relevant container.

This is the reference I found on combining two drop down selections to load one page:

This is the reference I found on the Ajax/Jquery content loading:

Would someone be willing to help combine the two in a clean and proper manner?

Assuming each col A and col B combination identify only one possible “item” value (be it image, link, video), I would create a table like

CREATE TABLE whatever (
  col_a_val INT NOT NULL
  , col_b_val INT NOT NULL
  , item VARCHAR(##) NOT NULL 
  , PRIMARY KEY (col_a_val, col_b_val) 

To help reduce the possibility of innocent error, I would use drop-down selects.

The form should go to the server by default, but if JavaScript is enabled you could “preventDefault” the submit and return the result using AJAX instead of loading a new page.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.