Page 1 of 1

putting a drop down list in an html table

Posted: Thu Mar 29, 2018 7:29 pm
by bowlesj
Hi

I am trying to get a drop down list (combo box) in an html table. I have inserted the same code that I use to put a drop down list in a text box in a form into a table element (at least I think it is the same code - it looks the same to me). It works except for one thing. Instead of giving me a combo box it gives me a list box. I attached a picture of the result. The problem is obviously that it makes the table way too large.

So then I thought I could force it to a smaller table row. I put the style statement with a height:18px value. It made the rows the correct height but I get the double arrow of a list box rather than a single down arrow of a combo box (drop down box). I attached a 2nd picture for this one too.

Is there a trick to getting this to work. I had to force a select on each table row to make it work properly. Otherwise it gave me an index error. I could not find any examples with the following google search "html list box versus combo box".

Currently I am doing a google search "html list box versus drop down list" to see if I missed something. I have never used a list box.

I found one suggestion to put in class='dropdown'. I tried this after both the <td and the <select and I get the same results.

I was reading this quote:
a combo box is a combination of an input text field and a list of options. You can type in stuff in the input field and the list should update to highlight a possible match
So I tried that (putting the select inside the <input type=textbox> statement and it does not work.

I resorted to my google search trick with this string "html <td> <select > <option </option> </select> </td>"
and I found this example which seems to work. http://jsfiddle.net/5FyCA/
Trying to find the difference.


Thanks,
John

the original attempt.

Code: Select all

$CurrRow = 0;
while($CurrRow <= 9) {
   $CurrRow = $CurrRow + 1;
   echo("<tr>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSongName[]' value='' size=35 ></td>\n");
   //echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' >   <input type='textbox' name='NewFakeBook[]' value='' size=9 >    </td>\n");

   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' > 
<select name='NewFakeBook[]' size='9' style='height:18px;'  id='Combobox_FakeBook'>
<option  value=SelectFakebook selected>Select</option>
<option value=RB_BC_V1>RB_BC_V1</option>
<option value=RB_BC_V2>RB_BC_V2</option>
<option value=RB_BC_V3>RB_BC_V3</option>
</select>
</td>\n");

   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewBPM[]' value='' size=1  ></td>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSinging[]' value='' size=2  ></td>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSemiToneShift[]' value='' size=8  ></td>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSoloing[]' value='' size=2  ></td>\n");
  echo("</tr>\n");
} //while($CurrRow <= 9) {

with 'height:18px;'

Code: Select all

$CurrRow = 0;
while($CurrRow <= 9) {
   $CurrRow = $CurrRow + 1;
   echo("<tr>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSongName[]' value='' size=35 ></td>\n");
   //echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' >   <input type='textbox' name='NewFakeBook[]' value='' size=9 >    </td>\n");

   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' > 
<select name='NewFakeBook[]' size='9' style='height:18px;' id='Combobox_FakeBook'>
<option value=SelectFakebook selected>Select</option>
<option value=RB_BC_V1>RB_BC_V1</option>
<option value=RB_BC_V2>RB_BC_V2</option>
<option value=RB_BC_V3>RB_BC_V3</option>
</select>
</td>\n");

   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewBPM[]' value='' size=1  ></td>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSinging[]' value='' size=2  ></td>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSemiToneShift[]' value='' size=8  ></td>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSoloing[]' value='' size=2  ></td>\n");
  echo("</tr>\n");
} //while($CurrRow <= 9) {
with class statement

Code: Select all

   echo("<td class='dropdown' style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;'>
<select class='dropdown' name='FakeBookLookup' size='9' id='Combobox_FakeBook' >
<option value=SelectFakebook selected>Select</option>
<option value=RB_BC_V1>RB_BC_V1</option>
<option value=RB_BC_V2>RB_BC_V2</option>
<option value=RB_BC_V3>RB_BC_V3</option>
</select>

Re: putting a drop down list in an html table

Posted: Thu Mar 29, 2018 8:53 pm
by bowlesj
A clean post with the resulting code that worked, a comment and an attached picture. This was a tough one. If it was not for my handy dandy google search trick (mentioned near the end of the above post) I never would have found it. I also want to get a drop down for the songs (tomorrow - time to call it a day).

Code: Select all

$CurrRow = 0;
while($CurrRow <= 9) {
   $CurrRow = $CurrRow + 1;
   //START: The example that helped me get it to work
   //       https://stackoverflow.com/questions/23018842/add-a-drop-down-in-a-table-using-html
   //       http://jsfiddle.net/5FyCA/
   //       MY NOTE: It seems the trick is to put the class='select' in the very first TD statement for each row. It processes the name='NewFakeBook[]' correctly when I click submit on the form.
   //END: The example that helped me get it to work

   echo("<tr>\n");
   echo("<td class='select' style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSongName[]' value='' size=35 ></td>\n");
   echo("
		<td><select name='NewFakeBook[]'>
		<option value='SelectFakebook' selected>SelectFakebook</option>
		<option value='RB_BC_V1'>RB_BC_V1</option>
		<option value='RB_BC_V2'>RB_BC_V2</option>
		<option value='RB_BC_V3'>RB_BC_V3</option>
		</select></td>
\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewBPM[]' value='' size=1  ></td>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSinging[]' value='' size=2  ></td>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSemiToneShift[]' value='' size=8  ></td>\n");
   echo("<td style='background-color:transparent;border:1px #c0c0c0 solid;text-align:left;vertical-align:top;height:18px;' ><input type='textbox' name='NewSoloing[]' value='' size=2  ></td>\n");
  echo("</tr>\n");
} //while($CurrRow <= 9) {