asked on

Need to have expandable html select dropdown list

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

levelninesports

ASKER

even better would be if the dropdown menu maxed out if the "see more options" option is hovered over

Michel Plungjan

Do you want the following options to come from server?
Then you need Ajax

levelninesports

ASKER

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

Kin Fat SZE

??
you could store the values into javascript array
and follow comment on
https://www.experts-exchange.com/questions/24124810/How-to-expand-select-pull-down-menu.html #23587727
it should works? I read your question several times.....

levelninesports

ASKER

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

ASKER CERTIFIED SOLUTION

Kin Fat SZE

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

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

levelninesports

ASKER

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?

levelninesports

ASKER

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

levelninesports

ASKER

works but as with other javascript options tried, its visually buggy on ie