Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

HTML multiple column drop down select box

Posted on 2013-11-02
5
4,554 Views
Last Modified: 2013-11-12
Hi folks,

This is actually related to a PHP page pulling from a MySQL DB, but I'll figure out the rest once I get a working demo.

What I need is to click on an HTML dropdown box that currently displays an index number but when clicked it displays three fields of the data in the drop down.  Then when the user makes a choice and it displays only the left, indexed field and onChange it populates a text/input field with the second column of data.  Another text field with the 3rd column of data, etc.

Real life scenario:  Asset tag, computer and serial number.  User is on a web page and they have a choice to select an available computer.  They see a drop down that is a list of asset tags.  They click the dropdown and it shows "12345 - HP8300 - SN1GGY", "12346 - HP8250 - SN3JB77",  "12347 - HP7700 - HK71SB"  and so on.

They make a choice of "12345 - HP8300 - SN1GGY" and it returns just "12345" in the visible page/field/box and after they select it, it populates the adjacent fields with "HP8300" and "SN1GGY".  This seems so very simple and common.

 I'm thinking that maybe as an alternative there is a select/dropdown that always contains all this concatenated data and acts as a "button" or selection tool and this populates my other fields after update.  This selection object would not be connected to any data field, it would just populate my other data fields.
0
Comment
Question by:dcjsdts
  • 2
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39618677
Do you want 2 drop down selects?  I use http://www.appelsiini.net/projects/chained
 
Your html is created as below.  You can see the selected value of option 1 is then linked to the class in the 2nd select.  In your php/mysql, you would simply created the select and then option values dynamically by looping.  The 2nd drop down you would have to have a query in your db with the linkage.  
<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

Open in new window

Then a jquery call
$("#series").chained("#mark");

Open in new window


And all of this assumes you have the your js for jquery and chained loaded
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39619991
If you are actually looking for a multi-column select you are wasting your time.  Such a thing does not exist and probably never will.

You can probably style a table or widget comprised of divs to simulate what you want, but it will not  be a functional select.

If you want to use the more rational approach of using adjacent selects, then what padas is giving you is the way to go, and is worth more than the paltry 50 points you offered.

Cd&
0
 

Accepted Solution

by:
dcjsdts earned 0 total points
ID: 39632399
I decided to go with optgroups within my SELECT statement.  This allowed me to at least narrow down my "primary" and "secondary" column.  Although per each optGroup, I have nearly 1,000 entries, at least when I click the drop down and select my choice I can refer to the header.  I kept the points low as to avoid wasting anyone's time.

SOLUTION:

function setDevices(elem){
document.getElementById('NewModel').value = elem.options[elem.selectedIndex].parentNode.label;
 }

Open in new window


<select size="1" style="width:100;" id="NewTag" name="NewTag" onChange="setDevices(this);">
	<option selected><? print($row[NewTag]); ?></option>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
	</select>

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39633515
Using optgroups open other possibilities, but a closed under valued question is not the place to explore that.

Cd&
0
 

Author Closing Comment

by:dcjsdts
ID: 39641107
Self closed
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question