Gå til innhold

dynamisk dropdownlist og litt hjelp.

peskungen

Anbefalte innlegg

peskungen

peskungen

Skrevet
Skrevet

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?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
grimjoey

grimjoey

Skrevet
Skrevet (endret)

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 av grimjoey
Lenke til kommentar
peskungen

peskungen

Skrevet
  • Forfatter
Skrevet

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 :p

 

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

Lenke til kommentar
grimjoey

grimjoey

Skrevet
Skrevet (endret)

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 av grimjoey
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...