Skrývanie option v selecte pomocou js bez refreshu

Quido

Zdravim ludia, mam takyto problem. Mam formular v ktorom je viac selectov a vo vsetkych je ta ista ponuka. Po vybrani moznosti v jednom selecte chcem aby v ostatnych selectoch uz nebola pripadne aby sa uz nezobrazovala alebo bola aspon skrita. Skusal som to pomocou css visibility ale fičalo to iba vo firefoxe ale v opere ani v expoleri nie. Potom som to skusal tak ze celu ponuku som chcel prepisat pomocou innerHTML ale zase to ficalo iba vo firefoxe ale v expoleri a v opere to zamzalo celu ponuku a novu tam nedalo. Takze toto je moj problem budem vam velmi vdacny ak mi ho pomozete riesit dikes.

Kód: Vybrať všetko

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="javascript" type="text/javascript">


function vybrany(ktory){
	fill(ktory);
	pom = ktory.value;
	selecty = document.getElementsByTagName('select');
	for(var i=0; i < selecty.length; i++){
		for(var j = selecty[i].length-1; j >= 0; j--){
			if((pom == selecty[i].options[j].value) && (ktory !== selecty[i])) {
				selecty[i].remove(j);
			}
		}
	}
}
function fill(ktory){
	selecty = document.getElementsByTagName('select');
	for (var i=0; i < selecty.length; i++) {
		if(ktory !== selecty[i]) selecty[i].options.length = 0;
		var opts = new Array();
		opts[1] = new Option("janko","janko");
		opts[2] = new Option("igor","igor");
		opts[3] = new Option("peter","peter");
		opts[4] = new Option("marienka","marienka");
		opts[5] = new Option("jurko","jurko");
		if(ktory !== selecty[i]) {
			for (j=1; j <= opts.length; j++) {
				selecty[i].options[selecty[i].options.length] = opts[j];
			}
		}
	}
}

</script>

</head>

<body >
<form name="formulat" action="">
	<select name="prvy" onchange="vybrany(this)">
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
	
	<select name="druhy" onchange="vybrany(this)">
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
	
		<select name="druhy" onchange="vybrany(this)">
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
	
		<select name="druhy" onchange="vybrany(this)">
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
	
		<select name="druhy" onchange="vybrany(this)">
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
</form>
</body>
</html>

Pre demonštráciu je tam 5 rovnakých selectvo, fungovať to funguje ale je tam jedná chyba. pri výbere sa všetky ostatné výbery zrušia. Nechce sa mi to už dokončievať, idem spať ale ak s tým nebudeš vedieť hnúť tak ti to dorobím.

Quido · Príspevok od používateľa **Quido** » 16 mar 2008, 9:24

vopred diki za ochotu , no ten tvoj kod ma chybycku v tom a to asi aj vies ze ked sa zmeni ina polozka tak sa zmenia naspat aj ostatne...ale to neni taky problem snad keby som sa s tym chvilku hral tak ho viriesim problem je ze to nefici v IE

respektive ja mam IE7 a potrebujem aby to ficalo vsade rovnako. Ak by ta napadlo nieco ako to spojazdnit aj tam daj pls vediet.....dikes

tak som to trošku pomenil, zjednodušil. Ide mi to tak ako má (výber ostane v aktuálnom ako vybraný, z ostatných sa zmaže) aj v mozille firefox aj v IE. V IE mi vyskočí najprv dáka kravina či chcem povoliť obsah ActiveX tak tam klikni a daj povoliť zablokovaný obsah ( IE je kravina

)

ak si to nebudeš vedieť upraviť, tak sa ozvi

Kód: Vybrať všetko

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="javascript" type="text/javascript">

var pamat = new Array();
var selecty = document.getElementsByTagName('select');

function vybrany(ktory){
	for(var i=0; i < selecty.length; i++){
		if(selecty[i] == ktory) pamat[i] = ktory.value;
	}
	fill();
}
function fill(){
	for (var i=0; i < selecty.length; i++) {
		selecty[i].options.length = 0;
		var opts = new Array();
		opts[0] = "vyber jednú položku";
		opts[1] = "janko";
		opts[2] = "igor";
		opts[3] = "peter";
		opts[4] = "marienka";
		opts[5] = "jurko";
		for (j=0; j < opts.length; j++) {
		if (typeof(pamat[i]) !== "undefined") selecty[i].options[0] = new Option(pamat[i],pamat[i]);
		selecty[i].selectedIndex = 0;
			if(pamat.toString().indexOf(opts[j]) == -1){		
				  opt = new Option(opts[j],opts[j]);
				  selecty[i].options[selecty[i].options.length] = opt;
				  }
			}
		
	}
}
function znova(){
	while (pamat.length>0) pamat.pop();
	fill();
}

</script>

</head>

<body >
<form name="formulat" action="">
	<select name="prvy" onchange="vybrany(this)">
		<option value="vyber jednú položku">vyber jednú položku
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
	
	<select name="druhy" onchange="vybrany(this)">
		<option value="vyber jednú položku">vyber jednú položku
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
	
	<select name="druhy" onchange="vybrany(this)">
		<option value="vyber jednú položku">vyber jednú položku
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
	
	<select name="druhy" onchange="vybrany(this)">
		<option value="vyber jednú položku">vyber jednú položku
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
	
	<select name="druhy" onchange="vybrany(this)">
		<option value="vyber jednú položku">vyber jednú položku
		<option value="janko">janko
		<option value="igor">igor
		<option value="peter">peter
		<option value="marienka">marienka
		<option value="jurko">jurko
  	</select>
</form>
<a href="javascript:znova()">reset</a>
</body>
</html>

Quido · Príspevok od používateľa **Quido** » 16 mar 2008, 9:55

ja mam nazov option rozny od jeho value. Vo value mam idecko a v nazve napriklad Marienka. tak keby si mal este cas to tam nejak editnut aby to fungovalo aj takto..... inak dikes uz to fici aj v IE

ono som to skusal tam pridat jedno pole s nazvami ale problem je ze este aj druhe to pamat treba nejak nastavovat.... tak som nevedel ako to tam je s tymi premmennymi.... a som strasne chory a hlava ma boli a nevladzem velmi nad tym rozmyslat ale este pokukam ale dufam ze budes rychlejsi..xixi

Quido napísal:ono som to skusal tam pridat jedno pole s nazvami ale problem je ze este aj druhe to pamat treba nejak nastavovat.... tak som nevedel ako to tam je s tymi premmennymi.... a som strasne chory a hlava ma boli a nevladzem velmi nad tym rozmyslat ale este pokukam ale dufam ze budes rychlejsi..xixi

no neviem, ono by to bolo jednoduché spraviť s dvoma poľami (aj som skúšal) ale problem nastáva pri výbere. Musím si uložiť value a aj text aby som tú hodnotu potom mohol obnoviť. K value vieme pristúpiť cez js, ale s tým textom čo sa tam zobrazuje je to horšie. Teda aspoň ja to neviem. Mohl by sa to robiť cez reťazec s nejakým oddelovačom a potom časť by si vpísal do value a časť do text (to by som tiež vedel) ale tam zase nastane problém pri zisťovaní či daný option pridať alebo nepridávať...
ak ma napadne niečo efektívne, tak to sem určite dám.

Quido

innerHTML - cez to by si mohol ziskat hodnotu medzi optionami ci nie? to by bol ten text

ele neviem ci to pojde v IE ale myslim ze ziskanie hodnoty tymto sposobom pojde. skus to pls.....dikes

Quido napísal:innerHTML - cez to by si mohol ziskat hodnotu medzi optionami ci nie? to by bol ten text ele neviem ci to pojde v IE ale myslim ze ziskanie hodnoty tymto sposobom pojde. skus to pls.....dikes

innerHTML získa text nejakého elementu. To znamená, že text čo je medzi <p></p> alebo <div></div> a tak.. dávať p alebo div do selectu je zverstvo (neviem či by to vôbec išlo). Práve v tom je ten problém, že ten text nie je nijak ohraničený. Možno ak by sa to dalo do labelu...

Quido

ale je predsa ohraničeny ked das <option></option> mne to islo pri mojich predoslzch pokusoch yiskat takto hodnoptu ktoru som si vipisal alertom ale potom som s ty mnevedel dalaj....skusal si to? moyno bz to slo nejak tak ze sa tam prida este id rovnake ako value a potom neco take ako getElementByID().innerHTML a to bz malo ist ak mas <option></option>

Quido napísal:ale je predsa ohraničeny ked das <option></option> mne to islo pri mojich predoslzch pokusoch yiskat takto hodnoptu ktoru som si vipisal alertom ale potom som s ty mnevedel dalaj....skusal si to? moyno bz to slo nejak tak ze sa tam prida este id rovnake ako value a potom neco take ako getElementByID().innerHTML a to bz malo ist ak mas <option></option>

nie, neskúšal.. myslel som že to nezpapá

som nevedel že aj také veci sa dajú robiť, vidíš to aká som lama

no tak potom kde je problém? idem to pozreť ako sa to bude chovať, či to robí naozaj to čo má

Quido

lama som tu ja lebo sa neviem poriadne yorienovat v tom sice keby som mal viac casu a nebol taky chory tak by som to mozno aj nejak zkodil ale tlaci cas a mne ide hlava strelit

este ze su tu ludia ako ty...

....... ako ide to?

Vymazal som aj tie selecty nech sa to nemusí všetko prepisovať, naplnia sa pri načítaní stránky. Skús teraz:

Kód: Vybrať všetko

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="javascript" type="text/javascript">

var pamat = new Array();
var pom_pamat = new Array();
var selecty = document.getElementsByTagName('select');

function vybrany(ktory){
   for(var i=0; i < selecty.length; i++){
      if(selecty[i] == ktory) {
	  	pamat[i] = ktory.value;
		pom_pamat[i] = ktory.options[ktory.selectedIndex].innerHTML;
		}
   }
   fill();
}
function fill(){
   for (var i=0; i < selecty.length; i++) {
      selecty[i].options.length = 0;
      var opts = new Array();
      opts[0] = "vyber jednú položku";
      opts[1] = "aaa";
      opts[2] = "bbb";
      opts[3] = "ccc";
      opts[4] = "ddd";
      opts[5] = "eee";
	  var popis = new Array();
      popis[0] = "vyber jednú položku";
      popis[1] = "janko";
      popis[2] = "igor";
      popis[3] = "peter";
      popis[4] = "marienka";
      popis[5] = "jurko";
      for (j=0; j < opts.length; j++) {
      if (typeof(pamat[i]) !== "undefined") selecty[i].options[0] = new Option(pom_pamat[i],pamat[i]);
      selecty[i].selectedIndex = 0;
         if(pamat.toString().indexOf(opts[j]) == -1){      
              opt = new Option(popis[j],opts[j]);
              selecty[i].options[selecty[i].options.length] = opt;
              }
         }
      
   }
}
function znova(){
   while (pamat.length>0) {
   		pamat.pop();
		pom_pamat.pop();
		}
   fill();
}

</script>

</head>

<body onload="fill()">
<form name="formulat" action="">
   <select name="prvy" onchange="vybrany(this)">
     </select>
   
   <select name="druhy" onchange="vybrany(this)">
     </select>
   
   <select name="treti" onchange="vybrany(this)">
     </select>
   
   <select name="stvrty" onchange="vybrany(this)">
     </select>
   
   <select name="piaty" onchange="vybrany(this)">
     </select>
</form>
<a href="javascript:znova()">reset</a>
</body>
</html>

Quido

vyzera to ze to funguje..... vecer to skusim implementovat na moj formular...dufam ye to nebude nidke robit problemy....dikes....moc si mi pomohol

bude to robiť problém ak tam máš aj iné selecty okrem týchto na ktoré to chceš aplikovať. Potom im budeš musieť dať id a pristupovať k ním na základe id a nie na základe tagname
nz

Quido

v tom formulari budem mat len tieto selecty..dik

Quido

ak si vzbereim polzky a potom niektoru z nich vratim na moznost vyber jednu polozku tak tato moznost potom zmizne zo vsetkzch ostatnych

Kód: Vybrať všetko

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="javascript" type="text/javascript">

var pamat = new Array();
var pom_pamat = new Array();
var selecty = document.getElementsByTagName('select');

function vybrany(ktory){
   for(var i=0; i < selecty.length; i++){
      if(selecty[i] == ktory) {
	  	pamat[i] = (ktory.value != "vyber jednú položku") ? ktory.value : "";
			pom_pamat[i] = ktory.options[ktory.selectedIndex].innerHTML;
		}
   }
   fill();
}
function fill(){
   for (var i=0; i < selecty.length; i++) {
      selecty[i].options.length = 0;
      var opts = new Array();
      opts[0] = "vyber jednú položku";
      opts[1] = "aaa";
      opts[2] = "bbb";
      opts[3] = "ccc";
      opts[4] = "ddd";
      opts[5] = "eee";
	  var popis = new Array();
      popis[0] = "vyber jednú položku";
      popis[1] = "janko";
      popis[2] = "igor";
      popis[3] = "peter";
      popis[4] = "marienka";
      popis[5] = "jurko";
      for (j=0; j < opts.length; j++) {
      if ((typeof(pamat[i]) !== "undefined") && (pom_pamat[i] != "vyber jednú položku")) selecty[i].options[0] = new Option(pom_pamat[i],pamat[i]);
      selecty[i].selectedIndex = 0;
         if(pamat.toString().indexOf(opts[j]) == -1){      
              opt = new Option(popis[j],opts[j]);
              selecty[i].options[selecty[i].options.length] = opt;
              }
         }
      
   }
}
function znova(){
   while (pamat.length>0) {
   		pamat.pop();
		pom_pamat.pop();
		}
   fill();
}

</script>

</head>

<body onload="fill()">
<form name="formulat" action="">
   <select name="prvy" onchange="vybrany(this)">
     </select>
   
   <select name="druhy" onchange="vybrany(this)">
     </select>
   
   <select name="treti" onchange="vybrany(this)">
     </select>
   
   <select name="stvrty" onchange="vybrany(this)">
     </select>
   
   <select name="piaty" onchange="vybrany(this)">
     </select>
</form>
<a href="javascript:znova()">reset</a>
</body>
</html>

Quido

dakujem pekne

všetko ide ako ma aj v mojej app tak uz len tam doriesit to ked sa formular vrati spat s chybou aby boli vybrane selecty ale to skusim zatial sam ale keby to neslo tak sa ozvem..xixi

všetky vybrané položky sú v poli (pamat) tak nie je problém

Quido

ked odoslem formular a je chybny tak sa na neho vratim ale neviem ako mam zabezpečiť aby tie položky ktore predtym poslal boli vybrane.... viem ze si pisal ze to pole pamat ale nejak si to v tom js neviem spravit.....

Skrývanie option v selecte pomocou js bez refreshu

Skrývanie option v selecte pomocou js bez refreshu

v IE to nejde

este by som potreboval malu zmenu tvojho kodu

co tak innerHTML

Re: co tak innerHTML

este jeden problem tu nastal

problem pri odoslani formulara....