?
Solved

Need to have expandable html select dropdown list

Posted on 2009-02-09
10
Medium Priority
?
983 Views
Last Modified: 2012-06-27
I have an oscommerce function that turns an array into a dropdown list.. the porblem is sometimes the dropdown list has too many items for most customers to want to choose from.. if there are more than 8 options in the dropdown list I would like the display to show the first 5 and then a "+see all options" which would then expand the list to show them all (and remove the see all options) the list does not need to be collapsable.. this is just convenience its just a dropdown list so it does not get in the way of the page it is just most customers dont need to see so many options

That is if the array holds 6 options for the dropdown list the dropdown list would show them as normal, but if there were 10 the dropdown list would show

1st array data
2nd array data
3rd
4th
5th
+see more options

If they click on one of the 1st 5 its just like a normal selection from a dropdown list, but if they click on the '+see more options' then the list expands to the complete list
1st array data
2nd array data
3rd
4th
5th
6th
7th
8th
9th
10th

like a normal dropdown list
included the relevant code



function tep_draw_pull_down_menu($name, $values) {
    $field = '<select name="' . $name . '">';
    for ($i=0, $n=sizeof($values); $i<$n; $i++) {
      $field .= '<option value="' . ($values[$i]['id'] . '">' . values[$i]['text'] . '</option>';
    }
    $field .= '</select>';
    return $field;
  }
 
 
$name is the name of the <select>field
$values is an array with an 'id' and 'text' for each option to be shown
as you see there is no restriction on the size of this select field if there are 50 options, 50 will be shown

Open in new window

0
Comment
Question by:levelninesports
  • 6
  • 2
  • 2
10 Comments
 

Author Comment

by:levelninesports
ID: 23597145
even better would be if the dropdown menu maxed out if the "see more options" option is hovered over
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23598749
Do you want the following options to come from server?
Then you need Ajax
0
 

Author Comment

by:levelninesports
ID: 23607443
I know the options when the page is loaded and before the expand would be clicked so no I do not need to call the server..the function i presented generates the dropdown list.. though there are many ways I am sure a javascript can be inserted that does the job
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 15

Expert Comment

by:fsze88
ID: 23608266
??
you could store the values into javascript array
and follow comment on
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24124810.html  #23587727
it should works? I read your question several times.....
0
 

Author Comment

by:levelninesports
ID: 23608583
fsze88,
Sorry, I didnt delve into your answer before.. Ill have to play with it a little but it does seem to perform as desired (that option object is clearly the ticket.)  Not being a javascript expert, how do I convert my php variables into a javascript array so that I can create the new select menu in function showalloptions.  Remember this variable is dependent upon the page dynamically loaded, though the entire desired menu is know before anything is displayed.
thanks in advance
0
 
LVL 15

Accepted Solution

by:
fsze88 earned 2000 total points
ID: 23608704
var selectoptions=new Array(3);
selectoptions[0]='<echo $phpvalue>';
selectoptions[1]='<echo $phpvalue>';
selectoptions[2]='<echo $phpvalue>';

OR
var selectoptions=new Array();
selectoptions.push('<echo $phpvalue>');

more references
http://www.w3schools.com/JS/js_obj_array.asp
http://www.w3schools.com/jsref/jsref_obj_array.asp

entire desired menu is know before anything is displayed, it should works
reading data from db? like this
<script language="javascript">
var selectoptions=new Array();
<?
while ($row = mysql_fetch_array($resultset, MYSQL_BOTH)) {
echo 'selectoptions.push(' . $row["name"] . ');';
}

?>
</script>

hope can help you......
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23608888
Try this (Hacking the existing menu)

$showAmount=5;
$selScript = '<script>\n';
$selScript .= 'function crtOpt(id,txt) { this.id=id; this.txt=txt }\n';
$selScript .='var allVals = new Array();\n';
 
function tep_draw_pull_down_menu($name, $values) {
    $field = '<select name="' . $name . '" onChange="expandSel(this)">';
    for ($i=0, $n=sizeof($values); $i<$n; $i++) {
      if ($i<$showAmount) $field .= '<option value="' . ($values[$i]['id'] . '">' . values[$i]['text'] . '</option>';
      if ($i==$showAmount) $field .= '<option value="more">+see more options</option>';
      $selScript .= '   allVals[allVals.length]=new crtOpt("'. $values[$i]['id'] . '","' . values[$i]['text'] .'");\n';
    }
    $field .= '</select>';
    $selScript .= 'function expandSel(theSel) {\n';
    $selScript .= '  if (theSel.options[theSel.selectedIndex].value!="more") return;\n';
    $selScript .= '  for (var i='.$showAmount.';i<allvars.length;i++) {\n';
    $selScript .= '    theSel.options[i] = new Option(allvars[i].text,allVars[i].id);\n';
    $selScript .= '  }\n';
    $selScript .= '}\n</script>\n';
    return $selScript.$field;
  }

Open in new window

0
 

Author Comment

by:levelninesports
ID: 23678518
fsze88:
I got it working, had to make some adjustments to account for multiple dropdown lists on the same page any of which may need to be expandable, but am now left with one issue..
I cannot have it work properly and also have it show all the options as per old when javascript is disabled.. i know I can make a link "You have javascript disabled click here to see all options" which goes to the page as it was before.. or perhaps just redirect them before the page loads...
Im pretty sure the autoredirect is the best option but perhaps there is some other way, i thought i had it by using noscript tags but apparently noscript tags read php inside it no matter what?
0
 

Author Comment

by:levelninesports
ID: 23712323
fsze88
Actually I have an acceptable javacript disabled work around now the only step to perfection is when someone click the "see all options" I would like the list to be automatically expanded so the entire list is visible otherwise the user cant really tell that anything happened
for others here are the two code snippets that expand a select field when the "see all options" is clicked

<script type="text/javascript">
 
function showalloptions<? echo $last_options_id;?>(selectObj){
  var i;
  if (selectObj.options[selectObj.selectedIndex].value == 'seeall<? echo $last_options_id;?>'){
    selectObj.length=0;
    <?
    for ($i=0; $i<sizeof($display_option_data); $i++){
      echo "selectObj.options[selectObj.options.length]=new Option('" . $display_option_data[$i]['text'] . "','" . $display_option_data[$i]['id']. "',true,true);";
    }
    ?>
    selectObj.selectedIndex=0;
  }
}
</script>
<?php echo tep_draw_pull_down_menu_d($last_options_id,'id[' . $display_options_id . ']', $display_option_data,$selected_attribute);?>
 
  function tep_draw_pull_down_menu_d($option_id,$name, $values, $default = '', $parameters = '', $required = false) {
    $field = '<select name="' . tep_output_string($name) . '"';
 
    if (tep_not_null($parameters)) $field .= ' ' . $parameters;
 
    $field .= 'onchange="showalloptions'. $option_id. '(this);">';
 
    if (empty($default) && isset($GLOBALS[$name])) $default = stripslashes($GLOBALS[$name]);
 
    for ($i=0, $n=4; $i<$n; $i++) {	// show 4 normally
      $field .= '<option value="' . tep_output_string($values[$i]['id']) . '"';
      if ($default == $values[$i]['id']) {
        $field .= ' SELECTED';
      }
      $field .= '>' . tep_output_string($values[$i]['text'], array('"' => '&quot;', '\'' => '&#039;', '<' => '&lt;', '>' => '&gt;')) . '</option>';
    }
    $field .= '<option value="seeall'. $option_id .'">see all options +</option ></select>';
    if ($required == true) $field .= TEXT_FIELD_REQUIRED;
 
    return $field;
  }

Open in new window

0
 

Author Closing Comment

by:levelninesports
ID: 31544584
works but as with other javascript options tried, its visually buggy on ie
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

755 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