Dodawanie pozycji do pola <option>, pozycje z 1 <option multiple> do 2 Opcje

[darekpe]

Witam

Mam zamontowac na stronie dwa pola <option size=10 multiple> a wiec te "plaskie", nie rozwijane. Nastepnie przez dwuklik na pozycji w jednym oknie ma ona wesolo przeskoczyc do drugiego.
Cel jest taki, zeby uzytkownik klikal sobie na oknie z opcjami, a wszystko co wybral zbieralo sie w drugim okienku.

Z JavaScript jestem cienki, wogole nie wiem jak sie za to zabrac. Bardzo prosze o pomoc, moze podobny kawalek kodu do przerobienia, moze miejsce gdzie warto poszukac? hotscripts.com juz przewalilem.

dziekuje,
darek

[nospor]

[HTML] pobierz, plaintext 
<option size=10 multiple>
[HTML] pobierz, plaintext 

Chyba masz na myśli

[HTML] pobierz, plaintext 
<select size=10 multiple>
[HTML] pobierz, plaintext 

moze miejsce gdzie warto poszukac

Tak, u nas na forum. Było juz pare podobnych skryptów

[darekpe]

Dziekuje, zaraz biore sie za grzebanie w archiwum.

Oczywiscie chodzilo mi o <select>, jeszcze nie mysle trzezwo o tej porze :)

pozdrawiam,
darek

[ghostrider]

jak masz czas i ochote popracuj troche nadtym, to szkielet jeno, wymaga troche poprawek, szczegolnie pod IE. Kiedys mielismy tego uzyc, ale zmienilismy koncepcje i prace sie zatrzymaly.

[HTML] pobierz, plaintext 
<style media="screen" type="text/css">
	.selboxa, .selboxb {
		width: 150px;
		float:left;
	}
	.selboxb{
		float:right;
	}
	.selboxa select, .selboxb select {
		width:150px;
	}
	.selactions {
		float:left;
		text-align:left;
	}
	.selactions input {
		width: 60px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		font-weight:bold;
		border:1px solid #999999;
		background:white;
		margin-bottom:3px;
 
	}
	#bCtrl {
		width: 363px;
		text-align:center;
 
	}
	#bCtrl p{
		border: 1px solid #CCCCCC;
		background:#FCFCFC;
		margin-bottom: 3px;
		clear:both;
	}
</style>
<script language="javascript" >
 
	function in_array(neddle, haystack){
		for (var i=0; i < haystack.length; i++) {
			if (haystack[i] == neddle){
				return true;
			}
		}
		return false;
	}
 
	var LEFT 		= "boxa";
	var RIGHT 	= "boxb";
 
		function select_txtCompare(a, b){
			if( a.text >  b.text ) return 1;
			else if (a.text <  b.text) return -1;
			else if (a.text == b.text) {
				if (a.value > b.value) return 1;
				else if(a.value < b.value) return -1;
			}
			return 0;
		}
 
	function oneright(){
 
		var a = document.getElementById(LEFT);
		var b = document.getElementById(RIGHT);
		var al = a.length;
		var sv = new Array( );
		var st = new Array( );
		/* collect selected from a box */
		for (var i = 0; i < al; i++) {
   	 if (a.options[i].selected) {
        sv[sv.length] = a.options[i].value;
				st[st.length] = a.options[i].text;
				//a.options[i].selected = false;
   	 }
		}
		/* colect b box */
		var bl = b.length;
		var bv = new Array( );
		var bt = new Array( );
		var sl = sv.length;
		var opts = new Array( );
 
		for ( i = 0; i <bl; i++){
			bv[bv.length] = b.options[i].value;
			bt[bt.length] = b.options[i].text;
			opts[opts.length] = new Option (b.options[i].text, b.options[i].value);
 		} 
 
		for (i=0; i<sl; i++){
			if ( ! in_array(sv[i], bv) ) {
				opts[opts.length] = new Option( st[i], sv[i] );
			}
		}
		b.options.length = 0;
		opts.sort(select_txtCompare);
 
		for (i=0; i<opts.length; i++) {
			b.options[i] = opts[i];
			//b.options[i].selected = true;
		}
	}
 
	function oneleft(){
		/* colect b box */
		var b = document.getElementById(RIGHT);
		var bl = b.length;
		var bv = new Array( );
		var bt = new Array( );
		var opts = new Array( );
 
		for ( var i=0; i<b.length; i++ ){
			if (!b.options[i].selected) 
			opts[opts.length] = new Option (b.options[i].text, b.options[i].value);
		}
 
		b.options.length = 0;
		opts.sort(select_txtCompare);
		for (i=0; i<opts.length; i++) {
			b.options[i] = opts[i];
		}
 
 
 
	}
 
	function b_select(){
		var b = document.getElementById(RIGHT);
		var bl = b.length;
		for (var i = 0; i < bl; i++){
			b.options[i].selected = true;
		}
		return true;
	}
 
</script>
<form name="selects" enctype="application/x-www-form-urlencoded" method="post" onsubmit="return b_select()">
	<div id="bCtrl">
		<p> this is control, </p>
		<div class="selboxa">
			<select name="fa[]" size="10" multiple="multiple" id="boxa" onclick="oneright()" >
				<option value="a">this is value A</option>
				<option value="b">this is value B</option>
				<option value="c">this is value C</option>
				<option value="d">this is value D</option>
				<option value="e1">this is value E</option>
				<option value="e2">this is value E</option>
				<option value="g">this is value G</option>
				<option value="h">this is value H</option>
				<option value="i">this is value I</option>
				<option value="j">this is value J</option>
				<option value="k">this is value K</option>
				<option value="l">this is value L</option>
				<option value="m">this is value M</option>
				<option value="n">this is value N</option>
				<option value="o">this is value O</option>
				<option value="p">this is value P</option>
			</select>
		</div>
		<div class="selactions">
			<br  /><input type="button" name="one_right" value="&gt;" onclick="oneright()">
			<br  /><input type="button" name="all_right" value="&gt;&gt;">
			<br  />
			<br  /><input type="button" name="one_left" value="&lt;" onclick="oneleft()">
			<br  /><input type="button" name="all_left" value="&lt;&lt;">
 
 
		</div>
		<div class="selboxb">
			<select name="fb[]" size="10" multiple="multiple" id="boxb" onclick="oneleft()" onfocus="this.blur()" >
			</select>
		</div>
		<p>send this selects</p> <input type="submit" name="go" value="send this" />
		</div>
 
</form>
[HTML] pobierz, plaintext 

Ten post edytował ghostrider 30.11.2005, 11:52:21