variabele tekst in keuzemenu

Status
Niet open voor verdere reacties.
H

hoornist

Gebruiker
Lid geworden
25 jul 2008
Berichten
8
Je hebt een tekstveld. Wat je daarin typt, verschijnt ook in een keuzemenu, ergens op de pagina.

Nu heb ik meerdere keuzemenu's, verspreid over meerdere delen van een pagina, ongeveer 24 keer, waar dat overal de tekst moet verschijnen die je in het tekstveld typt.

Tot nu toe is het gelukt bij 2 keuzemenu's tegelijk. Maar bij meerdere menu's tegelijk lukt het niet.

Klik hier om te zien wat ik bedoel.

HTML: 
<script type="text/javascript"> 
function verander(arr) { 
   applyToSelect(document.getElementById('sel1'),arr); 
   applyToSelect(document.getElementById('sel2'),arr); 
} 

function applyToSelect(el, arr) 
{ 
   el.options.length = 0; 
   for(var i = 0; i< arr.length; i++ ) 
   { 
      el.options[el.options.length] = new Option(arr[i], arr[i]); 
      el.options[el.options.length] = new Option("Other"); 
   } 
   el.onchange = new Function("selectChanged(this);"); 
} 

function selectChanged(el) 
{ 
   if(el.id == "sel1") 
      el2 = document.getElementById("other1"); 
   else 
      el2 = document.getElementById("other2"); 

   if(el.selectedIndex != el.options.length - 1) 
      el2.readOnly = true; 
   else 
   { 
      el2.readOnly = false; 
      el2.focus(); 
   } 
} 
</script> 

<table width="600" border="0" align="center"> 
  <tr> 
    <td width="20%" height="30" valign="top">woonplaats:</td> 
    <td height="30" colspan="2" valign="top"><input name="titel" type="text" id="titel" size="20" onkeyup="verander([this.value]);" /></td> 
  </tr> 
  <tr> 
    <td width="20%" height="30" valign="top">woonplaats 1</td> 
    <td height="30" valign="top"> 
    
    <label> 
      <select id="sel1"> 
        <option value="bezig">Eerst een woonplaats invullen</option> 
      </select> 
    </label> 
    
    </td> 
    <td height="30" valign="top"><input readonly="readonly" name="other1" type="text" id="other1" size="20" /></td> 
  </tr> 
  
  <tr> 
    <td height="30" valign="top">woonplaats 2</td> 
    <td height="30" valign="top"> 
     <label> 
      <select id="sel2"> 
        <option value="bezig">Eerst een woonplaats invullen</option> 
      </select> 
    </label> 
    </td> 
    <td height="30" valign="top"><input readonly="readonly" name="other2" type="text" id="other2" size="20" /></td> 
  </tr> 
  
  <tr> 
    <td width="20%" height="30" valign="top">&nbsp;</td> 
    <td height="30" colspan="2" valign="top"><input name="submit" type="submit" value="Invoegen" /></td> 
  </tr> 
</table>
 
aangezien je code werkt voor twee menu's moet het ook werken voor drie, vier, vijf enz menus. Gewoon erbij zetten in je verander functie:

Code: 
function verander(arr) { 
   applyToSelect(document.getElementById('sel1'),arr); 
   applyToSelect(document.getElementById('sel2'),arr); 
   applyToSelect(document.getElementById('sel3'),arr);
   applyToSelect(document.getElementById('sel4'),arr);
   applyToSelect(document.getElementById('sel5'),arr);
   applyToSelect(document.getElementById('selEnz'),arr);
}

Als dit niet werkt dan zit er een fout in je applyToSelect functie of je hebt de ID van een select verkeerd gespeld.


/edit:

Dit werkt ook gewoon in FF3. Het is jouw voorbeeld maar met de tabel en de overige inputs weg gelaten voor duidelijkheid.
Code: 
<html>
<head>
</head>
<body>
<script type="text/javascript"> 
function verander(arr) { 
   applyToSelect(document.getElementById('sel1'),arr); 
   applyToSelect(document.getElementById('sel2'),arr); 
   applyToSelect(document.getElementById('sel3'),arr); 
   applyToSelect(document.getElementById('sel4'),arr); 
   applyToSelect(document.getElementById('sel5'),arr); 
} 

function applyToSelect(el, arr) 
{ 
   el.options.length = 0; 
   for(var i = 0; i< arr.length; i++ ) 
   { 
      el.options[el.options.length] = new Option(arr[i], arr[i]); 
      el.options[el.options.length] = new Option("Other"); 
   } 
   el.onchange = new Function("selectChanged(this);"); 
} 

function selectChanged(el) 
{ 
   if(el.id == "sel1") 
      el2 = document.getElementById("other1"); 
   else 
      el2 = document.getElementById("other2"); 

   if(el.selectedIndex != el.options.length - 1) 
      el2.readOnly = true; 
   else 
   { 
      el2.readOnly = false; 
      el2.focus(); 
   } 
} 
</script> 

<input name="titel" type="text" id="titel" size="20" onkeyup="verander([this.value]);" /> <br />
<select id="sel1"> 
  <option value="bezig">Eerst een woonplaats invullen</option> 
</select>  <br />
    
<select id="sel2"> 
  <option value="bezig">Eerst een woonplaats invullen</option> 
</select>  <br />

<select id="sel3"> 
  <option value="bezig">Eerst een woonplaats invullen</option> 
</select>  <br />

<select id="sel4"> 
  <option value="bezig">Eerst een woonplaats invullen</option> 
</select>  <br />

<select id="sel5"> 
  <option value="bezig">Eerst een woonplaats invullen</option> 
</select>  <br />

</table>
</body>
</html>
 
Laatst bewerkt:
Hallo Glest,

Heel erg bedankt, maar die overige inputs zijn wel nodig. Dus als iemand kiest voor "other", moet het veld erlangs gedebokkeerd worden zodat ze iets kunnen invullen.

Aangezien er in jouw geval geen other 3, other4,... aanwezig is (wat mij maar niet lukte) denk ik dat het script erg aangepast moet worden, niet? Het gaat om dit stukje javascript waar ik mee sukkel:

Code: 
function selectChanged(el) 
{ 
   if(el.id == "sel1") 
      el2 = document.getElementById("other1"); 
   else 
      el2 = document.getElementById("other2"); 

   if(el.selectedIndex != el.options.length - 1) 
      el2.readOnly = true; 
   else 
   { 
      el2.readOnly = false; 
      el2.focus(); 
   } 
}

Ik ben intussen ook een oplossing aan het zoeken en hou je wel op de hoogte :)


Ik heb het intussen gevonden:

Code: 
function selectChanged(el) 
{ 
   if(el.id == "sel1") 
      el2 = document.getElementById("other1"); 
   if(el.id == "sel2") 
      el2 = document.getElementById("other2"); 
   if(el.id == "sel3") 
      el2 = document.getElementById("other3"); 	  
   if(el.id == "sel4") 
      el2 = document.getElementById("other4"); 	 
   if(el.id == "sel5") 
      el2 = document.getElementById("other5"); 	 	  	  

   if(el.selectedIndex != el.options.length - 1) 
      el2.readOnly = true; 
   else 
   { 
      el2.readOnly = false; 
      el2.focus(); 
   }

Bedankt voor de hulp
 
Laatst bewerkt:
hey, dat laatse scriptje kan net wat duidelijker. Het zal wel niet efficienter zijn maar het is wel korter. Overigens kun je, als je toch bezig bent het tweede element verbergen, en voor de zekerheid de waarde legen (maar dat is misschien gebruikers onvriendelijk, dus dat zou ik niet doen).

Code: 
function selectChanged(el) 
{ 
   var id2 = sel1.id.replace("sel", "other");
   el2 = docuement.getElementById(id2);

   if(el.selectedIndex != el.options.length - 1) 
   {
      el2.readOnly = true;
      el2.style.display = "none";
   }      
   else 
   { 
      el2.readOnly = false;
      el2.style.display = "inline";
      el2.focus(); 
   }
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan