I have a webpage using two drop down menus to select the inside color and the outside color of my product. link to site Click Here When the inside color is chosen the correct image is displayed but when I choose from the outside color drop down the other image disappears and the new selection is displayed. I need both of them to be displayed at the same time can someone help me change this contribution to suit my needs? I believe it is because the drop downs are all named the same. How can I change the php to use the proper names of the drop down menus?

This draws the drop down menus (html_output.php)and names them all 'zoek' right?

function tep_draw_pull_attribute_down_menu($name, $values, $default = '', $parameters = '', $required = false) {

    $field = '<select name="' . tep_output_string($name) . '"';

    if (tep_not_null($parameters)) $field .= ' ' . $parameters;

    $field .= '>';

    if (empty($default) && ( (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) || (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) ) ) {
      if (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) {
        $default = stripslashes($HTTP_GET_VARS[$name]);
      } elseif (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) {
        $default = stripslashes($HTTP_POST_VARS[$name]);

    for ($i=0, $n=sizeof($values); $i<$n; $i++) {
      $field .= '<option value="' . tep_output_string($values[$i]['id']) . '"';
      if ($default == $values[$i]['id']) {
        $field .= ' SELECTED';
      $field .= ' name="zoek">' . tep_output_string($values[$i]['text'], array('"' => '&quot;', '\'' => '&#039;', '<' => '&lt;', '>' => '&gt;')) . '</option>';

    $field .= '</select>';

    if ($required == true) $field .= TEXT_FIELD_REQUIRED;

    return $field;

and this is what's used (ajaximage.php) to answer the request:

$id = $_GET['zoek'];
$options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_thumbnail from " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pov.products_options_values_id = '" .$id . "'");
$options = tep_db_fetch_array($options_query);

if($options['products_options_values_thumbnail'] != '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'true')
echo "<a href='" . tep_href_link(FILENAME_OPTIONS_IMAGES_POPUP, "oID=" . $id) ."' target='blank'><img src=./images/options/".$options['products_options_values_thumbnail']." height=".OPTIONS_IMAGES_HEIGHT." width=".OPTIONS_IMAGES_WIDTH."></a>";
if($options['products_options_values_thumbnail'] == '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'true')
if($options['products_options_values_thumbnail'] != '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'false')
echo "<img src=./images/options/".$options['products_options_values_thumbnail']." height=".OPTIONS_IMAGES_HEIGHT." width=".OPTIONS_IMAGES_WIDTH.">";

and this is the javascript that handles it all right?

<script language="javascript">

    function createRequestObject() {

       var req;

          req = new XMLHttpRequest();
       } else if(window.ActiveXObject) {
          req = new ActiveXObject("Microsoft.XMLHTTP");
       } else {
          req = NULL;
          alert('Probleem met het aanmaken van hetXMLHttpRequest object');

       return req;


    var http = createRequestObject();

    function sendRequestSearch(iets) {

       http.open('get', 'ajaximage.php?zoek='+iets);
       http.onreadystatechange = handleResponseSearch;


    function handleResponseSearch() {

       if(http.readyState == 4 && http.status == 200){
          if(http.responseText) {
             document.getElementById("zoek_resultaten").innerHTML = http.responseText;
          } else {
             document.getElementById("zoek_resultaten").innerHTML = " &nbsp; ";

       } else {
          document.getElementById("zoek_resultaten").innerHTML = " &nbsp; ";



I could really use some help here as I know just enough to say I don't know enough.

Edited by geremyh: link to demo added

3 Years
Discussion Span
Last Post by diafol

How old is this code - not yours I take it? I haven't seen $HTTP_GET_VARS for years. Try $_GET instead. You have an array of names = id[n] for your selects. You could be using any names for $name -

 tep_draw_pull_attribute_down_menu($name, $values, $default = '', $parameters = '', $required = false)

I can't seem to find the right coding for it use the array as the names. How do i properly change these to use the right names given to each drop down instead of naming them all "zoek" I can't seem to get it right.

$field .= ' name="zoek">'

$id = $_GET['zoek'];

http.open('get', 'ajaximage.php?zoek='+iets);

WHy have you got names for your options, surely you should be using the name of the select itself.

This is tghe html you've created:

<select name="id[2]" onchange="sendRequestSearch(this.value);">
    <option value="4" name="zoek">default</option>
    <option value="5" name="zoek">Purple</option>

Which, to me, makes no sense. The object (this) is the <select> and the value will be the 'value' of the option selected. Nothing to do with zoek.


That's what I'm trying to do, use the name of the select itself but my limited knowledge in this has me stumped on what to change and how. I assume it is poorly coded which makes it even harder for me to wrap my head around it. I see now that it is naming all the $values zoek, is that for some reason the only way this package functions?


Here's soemthing I knocked up to build select dropdowns. It may help you, but it may not.

function createSelect($options,$selected=NULL,$equateKeyLabel=NULL)
    //Set yup intial vars
    $output = array();
    $op = (array) $options;
    $selV = ($selected) ? $selected : 0;

    if($equateKeyLabel) $op = array_combine($op, $op);

    foreach($op as $k=>$v)
        $sel = ($selV === $k) ? ' selected' : ''; 
        $output[] = "<option value='{$k}'$sel>{$v}</option>";
    return implode("\n", $output); 

$select1 = createSelect(array('Trousers','Skirts','Pants','Knickers','Vests'),false,true);
$select2 = createSelect(array('Trousers','Skirts','Pants','Knickers','Vests'),'Vests',true);
$select3 = createSelect(array(0=>'Trousers',1=>'Skirts',2=>'Pants',3=>'Knickers',4=>'Vests'),'Knickers',true);
$select4 = createSelect(array('trou'=>'Trousers','skir'=>'Skirts','pant'=>'Pants','knic'=>'Knickers','vest'=>'Vests'));
$select5 = createSelect(array('trou'=>'Trousers','skir'=>'Skirts','pant'=>'Pants','knic'=>'Knickers','vest'=>'Vests'),'pant');

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<p>Number indexed array without selected value</p>
<select name="select1">
    <?php echo $select1;?>
<p>Number indexed array with selected value</p>
<select name="select2">
    <?php echo $select2;?>
<p>Explicitly indexed array with selected value</p>
<select name="select3">
    <?php echo $select3;?>
<p>Associated array (value=>label) without selected value</p>
<select name="select4">
    <?php echo $select4;?>
<p>Associated array (value=>label) with selected value</p>
<select name="select5">
    <?php echo $select5;?>


Edited by diafol


In addition, you can listen like this:

var elems = document.querySelectorAll("select");
for(var i=0;i<elems.length;i++){
    elems[i].addEventListener("change", shoutOut);

function shoutOut()
    var val = this.value;
    var selectName = this.name; 
    console.log(selectName + " gave '" + val + "' as its new value"); 
    //run ajax
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.