dynamisk dropdownlist og litt hjelp.

peskungen · 26. juli 2008

Har så og si aldri holdt på med javascript, men skal begynne å se på det nå, da jeg ser stor nytte av det.

Jeg holder på med php, men trenger et javascript i php scriptet mitt.

Hey!

Jeg skal lage en dynamisk dropdownlist.

Jeg får ut disse options utifra min database:

ddlist1:
Manu
Liverpool
Chelsea
Newcastle

ddlist2:
Manu
Liverpool
Chelsea
Newcastle

ddlist3:
Manu
Liverpool
Chelsea
Newcastle

ddlist4:
Manu
Liverpool
Chelsea
Newcastle

Men vil at ddlists2, ddlist3, ddlist4 skal automatisk fjerne de valgene som allerede er valgt.

et eksempel vil være slik:

ddlist1:
Manu
Liverpool
Chelsea
Newcastle

ddlist2:
Manu
Liverpool
Chelsea

ddlist3:
Manu
Chelsea

ddlist4:
Manu

Kode for å lage dynamisk ddlist har jeg funnet, men det er ikke helt det jeg leter etter.

Noe jeg tenkte jeg kunne gjøre var å ta en "select teamname from teams"

Men da får jeg med alle lagene.

Det jeg da tenkte å gjøre var å lagre de lagene som er valgt i en string:

$sTeamsNotChoosable = 'where teamname = manu'.

Jeg ville da hatt en sql statement som hørtes noe lignende ut som dette:

select teamname from teams where teams != "manu"

Ville dette gått, eller har noen av dere noen andre tips?

___ · 26. juli 2008

Hvis du ikke har holdt på med JavaScript før, så tror jeg ikke dynamiske dropdown-lister er det første du bør starte med. Men hvis du absolutt må, kan vel denne artikkelen være verdt å spandere noen minutter på: http://www.plus2net.com/javascript_tutoria...opdown-list.php

Werner

grimjoey · 27. juli 2008

det var en utfordring, men her er en kodesnutt. slet litt med at selectObject.options oppførte seg som et array, men tok ikke vare på key's. så når jeg slettet id 0 med selectObject.remove(id) ble tidligere id 1 til id 0. litt håpløst å kjøre en for (i in ...) ...remove(i); for å slette alle options. men nå funker det.

hvis du kan vise meg hvordan tabellen(e) din(e) ser ut kan jeg skrive en kode for å hente info fra db til js.

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

// eksempeldata
var input = new Array('Liverpool', 'Manu', 'Chelsea', 'Newcastle');

function inArray(string, array) {
for (var i in array) {
	if (array[i] == string) return i;
}
return false;

}

function addOption(object, value, text) {
var option = document.createElement('option');
option.setAttribute('value', value);
option.text = text;
object.appendChild(option);

}

function removeOption(object, id) {
if (id >= 0) {
	if (object.options[id] != undefined) {
		if (!object.options[id].selected) {
			if (object.options[id].text != 'Velg lag') {
				object.remove(id);

			}

		}

	}

}

}

function removeAllOptions(object) {
var length = object.options.length;
for (i in object.options) {
	if (isNaN(i) === false) removeOption(object, (length - i));

}

}

function textInOptions(string, object) {
if (object && object.options) {
	for (var i in object.options) {
		if (isNaN(i) === false) {
			if (object.options[i].text == string) return i;

		}

	}

}
return false;

}

function update(object) {
if (!object || !object.tagName) {
	selects = document.getElementsByTagName('select');
	for (var i in selects) {
		if (isNaN(i) === false) {
			update(selects[i]);

		}

	}

} else {
	var choices = getChoices();
	removeAllOptions(object);
	if (textInOptions('Velg lag', object) === false) addOption(object, '', 'Velg lag');
	for (var i in input) {
		if (inArray(input[i], choices) === false) addOption(object, input[i], input[i]);

	}

}

}

function getChoices() {
var choices = new Array;
var selects = document.getElementsByTagName('select');
for (i in selects) {
	if (isNaN(i) === false) {
		if (selects[i].value != '')	choices.push(selects[i].value);

	}

}
return choices;

}

onload = update;

</script>

<p><select name="ddlist1" id="ddlist1" onchange="update();"></select></p>
<p><select name="ddlist2" id="ddlist2" onchange="update();"></select></p>
<p><select name="ddlist3" id="ddlist3" onchange="update();"></select></p>
<p><select name="ddlist4" id="ddlist4" onchange="update();"></select></p>
<div id="log"></div>
</body></html>

obs: finnes det andre dropdowns på siden vil disse bli påvirket av scriptet og/eller skriptet påvirket av disse. men det skal vel ikke stort mer enn en eller to velplasserte if's for å løse det.

testet nettopp koden i ie7 og opera. funket dårlig. må ha rotet meg borti noe firefox spesifikk kode.

Endret 27. juli 2008 av grimjoey

peskungen · 3. august 2008

Hey!

Takk for svar

Det så jo ut til å fungere veldig bra det scriptet du laget, men kan desverre ikke ta sjansen på at alle bruker firefox

Det jeg har sett litt på nå, er hvordan man får sendt en variabel fra javascript til php, noe jeg synes så ut som var litt vanskelig. Har Googlet mye, og testet med cookies som noen anbefalte her på forumet, men da får jeg ikke variabelen før jeg refresher, og det skjer jo ikke når man skifter valg i en selectionbox

Det jeg tenkte å gjøre, var å lagre valget brukeren gjør i en array i javascript. Denne arrayen vil jeg sende til php, for å så kunne arbeide videre med den der.

Noen tips, ideer?

Forøvrig er databasetabellen for lag slik:

tabell: teams

felt som skal selectes:

teamid

teamname

grimjoey · 3. august 2008

det må forekomme en request for å få sendt informasjon til php. dersom du ønsker at det skal skje uten å oppdatere siden er ajax eneste alternativet. cookies, post og get er de eneste måtene å overføre info. cookies krever en refresh, mens post og get kan gjøres via ajax.

et array lar seg ikke overføre til php helt uten videre. all informasjonen blir overført i form av strenger. men du kan kode arrayet til en streng og dekode i php scriptet.

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

function encodeArray(array) {
var stringOut;
var separator = ', ';
for (i in array) {
	stringOut += '"' + escape(array[i]) + '"' + seperator;

}
return stringOut.substr(0, (stringOut.length - separator.length));

}

</script>

<?php

function decodeArray($string) {
$separator = ', ';
$arrayOut = explode($separator, $string);
foreach ($arrayOut as $k => $v) {
	$arrayOut[$k] = rawurldecode(substr($v, 1, -1));

}
return $arrayOut;

}

?>

red:

her er det forrige scriptet moddet for ie og opera

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

var debug = false;
var verbose = false;

function addLog(msg) {
var log = document.getElementById('log');
msg = msg.replace("\n", "\n<br />");
log.innerHTML += msg + "<br />\n<br />\n";

}

function clearLog() {
var log = document.getElementById('log');
log.innerHTML = '';

}

// eksempeldata
var input = new Array('Liverpool', 'Manu', 'Chelsea', 'Newcastle');

function inArray(string, array) {
for (var i = 0; i < array.length; i++) {
	if (array[i] == string) return i;
}
return false;

}

function addOption(object, value, text) {
if (debug) addLog('Adding node: ' + value + "\nIn: " + object.id);
var option = document.createElement('option');
option.setAttribute('value', value);
option.text = text;
option.innerHTML = text;
object.appendChild(option);

}

function removeOption(object, id) {
id--;
if (debug) addLog('Trying to remove node: ' + id + "\nFrom: " + object.id);
if (id > 0) {
	if (object.childNodes[id] != undefined) {
		if (!object.childNodes[id].selected) {
			if (object.childNodes[id].text != 'Velg lag') {
				if (debug) addLog("Removing node: " + id + "\nFrom: " + object.id);
				var childRef = object.childNodes[id];
				object.removeChild(childRef);

			} else if (debug && verbose) addLog('failed: Velg lag');

		} else if (debug && verbose) addLog('failed: selected');

	} else if (debug && verbose) addLog('failed: undefined');

} else if (debug && verbose) addLog('failed: ' + id + ' > 0');

}

function removeAllOptions(object) {
var length = object.childNodes.length;
if (debug) addLog('Trying to remove ' + length + ' nodes!');
for (var i = 0; i <= length; i++) {
	if (debug && verbose) addLog('isNaN(' + i + '): ' + isNaN(i));
	if (isNaN(i) === false) removeOption(object, (length - i));

}

}

function textInOptions(string, object) {
if (object && object.childNodes) {
	for (var i = 0; i < object.childNodes.length; i++) {
		if (isNaN(i) === false) {
			if (object.childNodes[i]) {
				if (object.childNodes[i].text == string) return i;
			}
		}

	}

}
return false;

}

function update(object) {
if (debug) addLog('updating...');
if (!object || !object.tagName) {
	clearLog();
	if (debug) addLog('no object!');
	selects = document.getElementsByTagName('select');
	var length = selects.length;
	for (var i = 0; i < length; i++) {
		if (debug) addLog('isNaN(' + i + '): ' + isNaN(i));
		if (isNaN(i) === false) {
			if (debug) addLog('updating: ' + selects[i].id);
			update(selects[i]);

		}

	}

} else {
	var choices = getChoices();
	if (object.childNodes.length) removeAllOptions(object);
	if (textInOptions('Velg lag', object) === false) addOption(object, '', 'Velg lag');
	for (var i = 0; i < input.length; i++) {
		if (debug) {
			var choicesString = '';
			for (var j = 0; j < choices.length; j++) choicesString += choices[j] + ', ';
			var choicesString = choicesString.substr(0, (choicesString.length - 2));
			addLog('checking if ' + input[i] + "\nis in array(" + choicesString + ")\n" + inArray(input[i], choices));

		}
		if (inArray(input[i], choices) === false) addOption(object, input[i], input[i]);

	}

}

}

function getChoices() {
var choices = new Array;
var selects = document.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++) {
	if (isNaN(i) === false) {
		if (selects[i].value) choices.push(selects[i].value);

	}

}
return choices;

}

window.onload = update;

</script>

<p><select name="ddlist1" id="ddlist1" onchange="update();"></select></p>
<p><select name="ddlist2" id="ddlist2" onchange="update();"></select></p>
<p><select name="ddlist3" id="ddlist3" onchange="update();"></select></p>
<p><select name="ddlist4" id="ddlist4" onchange="update();"></select></p>
<div id="log"></div>
</body></html>

i dette scriptet kan valgene hentes fra getChoices();

så du kan ha et script som dette:

var form = document.getElementById('formId');
var submit = document.getElementById('submitButtonId');

submit.click = function() {

var choices = getChoices();
var choicesString = encodeArray(choices);

var hidden = document.createElement('input');
hidden.setAttribute('type', 'hidden');
hidden.setAttribute('name', 'choicesString');
hidden.setAttribute('value', choicesString);

form.submit();

}

et lite problem kan være at jeg har brukt js:escape() og php:rawurldecode() som er den samme enkodingen som brukes automatisk av browseren når query string sendes. så den kan muligens ikke brukes med GET. POST burde fungere i alle fall

Endret 4. august 2008 av grimjoey

peskungen · 5. august 2008

Takk takk

Skal se om jeg kan få implementert det . Det ser jo bra ut

Igjen, takker

Endret 5. august 2008 av peskungen

Logg inn

dynamisk dropdownlist og litt hjelp.

Anbefalte innlegg

peskungen

Lenke til kommentar

Videoannonse

___

Lenke til kommentar

grimjoey

Lenke til kommentar

peskungen

Lenke til kommentar

grimjoey

Lenke til kommentar

peskungen

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Vi bør ha dødsstraff for sånne folk.

Presidentvalget i USA 2024 1 2 3 4 581

Hvem er aktive 0 medlemmer