Strange Case of Dropdown Menu

Hi.

I am Italian. You excuse my English🙂

I everything wanted, to thank you for this splendid component. it is also the more profit and the simplest for the one that is not practical of computer languages.

I am trying to create some dropdown menu that appears to the consumer after the choice of an option from a dropdown menu "father."

In practice I was realizing a form with chronoforms that contained some dropdown menu that depended and they appeared according to the choice served as a drop menu "father."

Every choice in the menu "father" it provokes downward a spatial move some menu child correspondent.

In practice the first menu child of the first choice derived by the menu father appears, immediately under to the menu father. The second menu child of the second instead choice doesn't go to occupy (as I would want) the position of the menu child of the first choice, but, it immediately appears under the hypothetical position of the first menu child that, naturally it is not visible, because we have operated the second chosen by the menu father. And so street for the following choices. More they are the options of the principal menu and more the corresponding menus move downward him.

This is the wrong code that I use:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 100px;">Arcidiocesi</label>
    <select class="cf_inputbox validate-selection" id="select_1" size="1" title=""  name="dropdown">
    
      <option value="option 1" rel="none">Seleziona</option>
<option value="option 2"rel="risultato visibile1">Aquileia</option>
<option value="option 3" rel="risultato visibile2">Genova</option>
<option value="option 4" rel="risultato visibile3">Milano</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
<div rel="risultato visibile1">
  <label class="cf_label" style="width: 150px;">Diocesi Battesimo</label>
    <select class="cf_inputbox validate-selection" id="select_4" size="1" title=""  name="dioaqui">
    <option value="">Seleziona</option>
      <option value="Venezia">Venezia</option>
<option value="Padova">Padova</option>
<option value="Parenzo">Parenzo</option>
<option value="Pola">Pola</option>
<option value="Portogruaro">Portogruaro</option>
<option value="Treviso">Treviso</option>
<option value="Mantua">Mantua</option>
<option value="Udine">Udine</option>

   </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
<div rel="risultato visibile2">
  <label class="cf_label" style="width: 150px;">Diocesi Battesimo</label>
    <select class="cf_inputbox validate-selection" id="select_5" size="1" title=""  name="diogen">
    <option value="">Seleziona</option>
      <option value="Genova">Genova</option>
<option value="Chiavari">Chiavari</option>
<option value="La Spezia">La Spezia</option>
<option value="Albenga">Albenga</option>
<option value="Ventimiglia">Ventimiglia</option>

 </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
<div rel="risultato visibile3">
  <label class="cf_label" style="width: 150px;">Diocesi Battesimo</label>
    <select class="cf_inputbox validate-selection" id="select_6" size="1" title=""  name="diomil">
    <option value="">Seleziona</option>
      <option value="Milano">Milano</option>
<option value="Como">Como</option>
<option value="Lodi">Lodi</option>
<option value="Alessandria">Alessandria</option>
<option value="Novara">Novara</option>
<option value="Savona">Savona</option>
<option value="Pavia">Pavia</option>

Could you tell me as to modify it to resolve this problem?

Thanks for your consideration 🙂

Nik

I have forgotten that I use this code java:

/*****************************************/
/** Usable Forms 2.0, November 2005     **/
/** Written by ppk, www.quirksmode.org  **/
/** Instructions for use on my site     **/
/**                                     **/
/** You may use or change this script   **/
/** only when this copyright notice     **/
/** is intact.                          **/
/**                                     **/
/** If you extend the script, please    **/
/** add a short description and your    **/
/** name below.                         **/
/*****************************************/

var containerTag = 'DIV';

var compatible = (
	document.getElementById && document.getElementsByTagName && document.createElement
	&&
	!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
	);

if (compatible)
{
	document.write('<style>.accessibility{display: none}</style>');
	var waitingRoom = document.createElement('div');
}

var hiddenFormFieldsPointers = new Object();

function prepareForm()
{
	if (!compatible) return;
	var marker = document.createElement(containerTag);
	marker.style.display = 'none';

	var x = document.getElementsByTagName('select');
	for (var i=0;i<x.length;i++)
		addEvent(x[i],'change',showHideFields)

	var x = document.getElementsByTagName(containerTag);
	var hiddenFields = new Array;
	for (var i=0;i<x.length;i++)
	{
		if (x[i].getAttribute('rel'))
		{
			var y = getAllFormFields(x[i]);
			x[i].nestedRels = new Array();
			for (var j=0;j<y.length;j++)
			{
				var rel = y[j].getAttribute('rel');
				if (!rel || rel == 'none') continue;
				x[i].nestedRels.push(rel);
			}
			if (!x[i].nestedRels.length) x[i].nestedRels = null;
			hiddenFields.push(x[i]);
		}
	}

	while (hiddenFields.length)
	{
		var rel = hiddenFields[0].getAttribute('rel');
		if (!hiddenFormFieldsPointers[rel])
			hiddenFormFieldsPointers[rel] = new Array();
		var relIndex = hiddenFormFieldsPointers[rel].length;
		hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
		var newMarker = marker.cloneNode(true);
		newMarker.id = rel + relIndex;
		hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
		waitingRoom.appendChild(hiddenFields.shift());
	}
	
	setDefaults();
	addEvent(document,'click',showHideFields);
}

function setDefaults()
{
	var y = document.getElementsByTagName('input');
	for (var i=0;i<y.length;i++)
	{
		if (y[i].checked && y[i].getAttribute('rel'))
			intoMainForm(y[i].getAttribute('rel'))
	}

	var z = document.getElementsByTagName('select');
	for (var i=0;i<z.length;i++)
	{
		if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
			intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
	}

}

function showHideFields(e)
{
	if (!e) var e = window.event;
	var tg = e.target || e.srcElement;

	if (tg.nodeName == 'LABEL')
	{
		var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
		tg = document.getElementById(relatedFieldName);
	}
		
	if (
		!(tg.nodeName == 'SELECT' && e.type == 'change')
		&&
		!(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
	   ) return;

	var fieldsToBeInserted = tg.getAttribute('rel');

	if (tg.type == 'checkbox')
	{
		if (tg.checked)
			intoMainForm(fieldsToBeInserted);
		else
			intoWaitingRoom(fieldsToBeInserted);
	}
	else if (tg.type == 'radio')
	{
		removeOthers(tg.form[tg.name],fieldsToBeInserted)
		intoMainForm(fieldsToBeInserted);
	}
	else if (tg.type == 'select-one')
	{
		fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel');
		removeOthers(tg.options,fieldsToBeInserted);
		intoMainForm(fieldsToBeInserted);
	}
}

function removeOthers(others,fieldsToBeInserted)
{
	for (var i=0;i<others.length;i++)
	{
		var show = others[i].getAttribute('rel');
		if (show == fieldsToBeInserted) continue;
		intoWaitingRoom(show);
	}
}

function intoWaitingRoom(relation)
{
	if (relation == 'none') return;
	var Elements = hiddenFormFieldsPointers[relation];
	for (var i=0;i<Elements.length;i++)
	{
		waitingRoom.appendChild(Elements[i]);
		if (Elements[i].nestedRels)
			for (var j=0;j<Elements[i].nestedRels.length;j++)
				intoWaitingRoom(Elements[i].nestedRels[j]);
	}
}

function intoMainForm(relation)
{
	if (relation == 'none') return;
	var Elements = hiddenFormFieldsPointers[relation];
	for (var i=0;i<Elements.length;i++)
	{
		var insertPoint = document.getElementById(relation+i);
		insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
		if (Elements[i].nestedRels)
		{
			var fields = getAllFormFields(Elements[i]);
			for (var j=0;j<fields.length;j++)
			{
				if (!fields[j].getAttribute('rel')) continue;
				if (fields[j].checked || fields[j].selected) 
					intoMainForm(fields[j].getAttribute('rel'));
			}
		}
	}
}

function getAllFormFields(node)
{
	var allFormFields = new Array;
	var x = node.getElementsByTagName('input');
	for (var i=0;i<x.length;i++)
		allFormFields.push(x[i]);
	var y = node.getElementsByTagName('option');
	for (var i=0;i<y.length;i++)
		allFormFields.push(y[i]);
	return allFormFields;
}

/** ULTRA-SIMPLE EVENT ADDING **/

function addEvent(obj,type,fn)
{
	if (obj.addEventListener)
		obj.addEventListener(type,fn,false);
	else if (obj.attachEvent)
		obj.attachEvent("on"+type,fn);
}

addEvent(window,"load",prepareForm);


/** PUSH AND SHIFT FOR IE5 **/

function Array_push() {
	var A_p = 0
	for (A_p = 0; A_p < arguments.length; A_p++) {
		this[this.length] = arguments[A_p]
	}
	return this.length
}

if (typeof Array.prototype.push == "undefined") {
	Array.prototype.push = Array_push
}

function Array_shift() {
	var A_s = 0
	var response = this[0]
	for (A_s = 0; A_s < this.length-1; A_s++) {
		this[A_s] = this[A_s + 1]
	}
	this.length--
	return response
}

if (typeof Array.prototype.shift == "undefined") {
	Array.prototype.shift = Array_shift
}

Help me! 😟

Hi Nik,

Please see this post. I think that has the code you need.

Bob

PS I found the translation hard to understand so my apologies if I've misunderstood.

I thank you for the answer and I apologize for my English.

The post, that you have proposed me, hasn't helped me😟

Here is my problem.You go to this link (the menu is called "to greyhead" 🙂 ):

http://virgus87.altervista.org/index.php?option=com_chronocontact&Itemid=110

The dropdown menu that appears, according to the choice that I operate in that principal, occupy wrong positions in the web page. It always changes position :?

Thanks again.

Nik

Hi Nik,

It looks like you aren't closing these divs correctly <div rel="risultato visibilex"> so the page HTML is broken. The divs should also wrap the whole form item not just the select box part.

Bob

I have understood. thanks for your patience. Could you correct the error of the code to make to work the form?

Unfortunately I don't know anything of computer languages. I have used a code already compiled by somebody else 😟 😶 😶

Hi Nik,

It's dinner time on Friday evening so I must be feeling generous. This version at least has the code structure correct. Hopefully it will work with the rest of your script.

<div class="form_item">
    <div class="form_element cf_dropdown">
        <label class="cf_label" style="width: 100px;">Arcidiocesi</label>
        <select class="cf_inputbox validate-selection" id="select_1" size="1" title=""  name="dropdown">
            <option value="option 1" rel="none">Seleziona</option>
            <option value="option 2"rel="risultato visibile1">Aquileia</option>
            <option value="option 3" rel="risultato visibile2">Genova</option>
            <option value="option 4" rel="risultato visibile3">Milano</option>
        </select>
    </div>
    <div class="cfclear"> </div>
</div>
<div class="form_item"  rel="risultato visibile1">
    <div class="form_element cf_dropdown">
        <label class="cf_label" style="width: 150px;">Diocesi Battesimo</label>
        <select class="cf_inputbox validate-selection" id="select_4" size="1" title=""  name="dioaqui">
            <option value="">Seleziona</option>
            <option value="Venezia">Venezia</option>
            <option value="Padova">Padova</option>
            <option value="Parenzo">Parenzo</option>
            <option value="Pola">Pola</option>
            <option value="Portogruaro">Portogruaro</option>
            <option value="Treviso">Treviso</option>
            <option value="Mantua">Mantua</option>
            <option value="Udine">Udine</option>
        </select>
    </div>
    <div class="cfclear"> </div>
</div>
<div class="form_item"  rel="risultato visibile2">
    <div class="form_element cf_dropdown">
        <label class="cf_label" style="width: 150px;">Diocesi Battesimo</label>
        <select class="cf_inputbox validate-selection" id="select_5" size="1" title=""  name="diogen">
            <option value="">Seleziona</option>
            <option value="Genova">Genova</option>
            <option value="Chiavari">Chiavari</option>
            <option value="La Spezia">La Spezia</option>
            <option value="Albenga">Albenga</option>
            <option value="Ventimiglia">Ventimiglia</option>
        </select>
    </div>
    <div class="cfclear"> </div>
</div>
<div class="form_item"  rel="risultato visibile3">
    <div class="form_element cf_dropdown">
        <label class="cf_label" style="width: 150px;">Diocesi Battesimo</label>
        <select class="cf_inputbox validate-selection" id="select_6" size="1" title=""  name="diomil">
            <option value="">Seleziona</option>
            <option value="Milano">Milano</option>
            <option value="Como">Como</option>
            <option value="Lodi">Lodi</option>
            <option value="Alessandria">Alessandria</option>
            <option value="Novara">Novara</option>
            <option value="Savona">Savona</option>
            <option value="Pavia">Pavia</option>
        </select>
    </div>
</div>

Bob

It works perfectly!

I bow me to your generosity!

Thanks!!!! 😶 😶 😶 😶 🙂