<!DOCTYPE html>
<html>
<head>
<title>Test JS Gruppen als select</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.browsersortdiv {
-moz-column-width: 280px;
-moz-column-gap: 40px;
-webkit-column-width: 280px;
-webkit-column-gap: 40px;
-ms-column-width: 280px;
-ms-column-gap: 40px;
column-width: 280px;
column-gap: 40px;
}
.browsersortelement {
display: inline-block;
width: 200px;
border: 1px solid black;
margin: 1px;
padding: 2px;
text-align: center;
}
.browsersortelementminus {
border-radius: 10px;
border: 1px black solid;
padding-left: 2px;
cursor: pointer;
}
</style>
<script>
function tastenpruefung(taste,aufruf) {
var key = (taste.which) ? taste.which : taste.keyCode;
if (key == 13) {
aufruf();
}
}
function gruppenselect_init(dataobj){
document.getElementById('gruppentab').innerHTML = '';
// Liste sortieren
if (!dataobj['sortiert']) {
gruppenselect_sort(dataobj);
}
// <form> Feld befüllen
var string = '';
jQuery.each(dataobj['vergeben'],function(i,key) {
string += (string != '' ? ',' : '')+key;
});
document.getElementById('gruppenfeld').value = string;
// ausgewählte anzeigen
dataobj['vergeben'].sort(
function(a,b) {
return (dataobj['liste'][a].toLowerCase() > dataobj['liste'][b].toLowerCase()
? 1
: (dataobj['liste'][a].toLowerCase() < dataobj['liste'][b].toLowerCase()
? -1
: 0
)
);
}
);
jQuery.each(dataobj['vergeben'],function(i,key) {
var item = document.createElement('span');
item.className = 'browsersortelement';
item.innerHTML = dataobj.liste[key];
if (dataobj['darfaendern'] && dataobj['darfaendern'] == '1') {
var minus = document.createElement('span');
minus.className = 'browsersortelementminus';
minus.innerHTML = '-';
minus.setAttribute('data',key)
minus.onclick = function() {
var val = this.getAttribute('data');
for (var i = 0; i < dataobj['vergeben'].length; i++) {
if (dataobj['vergeben'][i] == val) {
dataobj['vergeben'].splice(i,1);
break;
}
}
gruppenselect_init(dataobj);
};
item.appendChild(minus);
}
document.getElementById('gruppentab').appendChild(item);
});
gruppenselect_select_bauen(dataobj);
}
function gruppenselect_sort(dataobj) {
dataobj['listesortiert'] = new Array;
jQuery.each(dataobj['liste'],function(i,key) {
dataobj['listesortiert'].push(i);
});
dataobj['listesortiert'].sort(
function(a,b) {
return (dataobj['liste'][a].toLowerCase() > dataobj['liste'][b].toLowerCase()
? 1
: (dataobj['liste'][a].toLowerCase() < dataobj['liste'][b].toLowerCase()
? -1
: 0
)
);
}
);
dataobj['sortiert'] = 1;
}
function gruppenselect_select_bauen(dataobj) {
document.getElementById('gruppentabplus').innerHTML = '';
if (dataobj['darfaendern'] && dataobj['darfaendern'] == '1') {
var offen = Object.keys(dataobj['liste']).length;
var vergeben = dataobj['vergeben'].length;
if (offen > vergeben || (dataobj['darfanlegen'] && dataobj['darfanlegen'] == 1)) {
var selfeld = document.createElement('select');
selfeld.style.cursor = 'pointer';
selfeld.id = 'gruppenselectselectfeld';
selfeld.onchange = function() {
var val = this.value;
if (val == 'x') {
if (dataobj['darfanlegen'] && dataobj['darfanlegen'] == 1) {
var aufrufspeichern = function() {
var eingabe = document.getElementById('gruppenselectinputid').value;
// formelle Prüfung
if (eingabe != '') {
var falsch = eingabe.search(/[^a-z0-9\.\_\-\(\)\!\§\$\%\/\{\}\[\] ]/i);
if (falsch == -1) {
// Doppelprüfung
var doppelt = 0;
jQuery.each(dataobj['liste'],function(i,key) {
if (dataobj['liste'][i].toLowerCase() == eingabe.toLowerCase()) {
doppelt = i;
}
});
if (!doppelt) {
// nächste freie Nummer suchen
var naechste = 1;
jQuery.each(dataobj['listesortiert'],function(i,key) {
if (key >= naechste) { naechste = key + 1; }
});
// Listen ergänzen
dataobj['liste'][naechste] = eingabe;
dataobj['vergeben'].push(naechste);
delete dataobj['sortiert'];
// hidden Feld
var inpfeld = document.createElement('input');
inpfeld.type = 'hidden';
inpfeld.name = dataobj['praefixneu']+naechste;
inpfeld.value = eingabe;
document.getElementById('sendeform').appendChild(inpfeld);
gruppenselect_init(dataobj);
}
else {
alert(dataobj['namegruppe']+' gibt es bereits: '+dataobj['liste'][doppelt]);
}
}
else {
alert('Das Feld enthält mindestens das folgende ungültige Zeichen: '+eingabe.substr(falsch,1));
}
}
else {
alert('Das Feld ist leer');
}
};
document.getElementById('gruppentabplus').innerHTML = '';
var beschriftung = document.createElement('span');
beschriftung.innerHTML = dataobj['namegruppe']+' neu anlegen: ';
document.getElementById('gruppentabplus').appendChild(beschriftung);
var inpfeld = document.createElement('input');
inpfeld.type = 'text';
inpfeld.name = 'gruppenselecteingabe';
inpfeld.id = 'gruppenselectinputid';
inpfeld.onkeydown = function(e) { tastenpruefung(e || event,aufrufspeichern); };
document.getElementById('gruppentabplus').appendChild(inpfeld);
var zeile = document.createElement('br');
document.getElementById('gruppentabplus').appendChild(zeile);
var abbruchschalter = document.createElement('span');
abbruchschalter.innerHTML = 'Abbruch';
abbruchschalter.style.cursor = 'pointer';
abbruchschalter.onclick = function() {
gruppenselect_init(dataobj);
};
document.getElementById('gruppentabplus').appendChild(abbruchschalter);
var abstand = document.createElement('span');
abstand.innerHTML = ' ';
abstand.style.paddingLeft = '10px';
abstand.style.paddingRight = '10px';
document.getElementById('gruppentabplus').appendChild(abstand);
var speichernschalter = document.createElement('span');
speichernschalter.innerHTML = 'Speichern';
speichernschalter.style.cursor = 'pointer';
speichernschalter.onclick = aufrufspeichern;
document.getElementById('gruppentabplus').appendChild(speichernschalter);
document.getElementById('gruppenselectinputid').focus();
}
}
else {
dataobj['vergeben'].push(val);
gruppenselect_init(dataobj);
}
};
var beschriftung = document.createElement('span');
beschriftung.innerHTML = dataobj['namegruppe']+' zuordnen: ';
document.getElementById('gruppentabplus').appendChild(beschriftung);
var optionNeu = new Option(' Bitte wählen ','0');
optionNeu.innerHTML = ' Bitte wählen ';
selfeld.appendChild(optionNeu);
jQuery.each(dataobj['listesortiert'],function(i,key) {
var match = 0;
jQuery.each(dataobj['vergeben'],function(i2,key2) {
if (key == key2) { match = 1; }
});
if (!match) {
optionNeu = new Option(dataobj.liste[key],key);
optionNeu.innerHTML = dataobj.liste[key];
selfeld.appendChild(optionNeu);
}
});
if (dataobj['darfanlegen'] && dataobj['darfanlegen'] == 1) {
optionNeu = new Option('* '+dataobj['namegruppe']+' neu anlegen','x');
optionNeu.innerHTML = '* '+dataobj['namegruppe']+' neu anlegen';
selfeld.appendChild(optionNeu);
}
document.getElementById('gruppentabplus').appendChild(selfeld);
document.getElementById('gruppenselectselectfeld').focus();
}
else {
document.getElementById('gruppentabplus').innerHTML = 'Es steht keine Auswahl (mehr) zur Verfügung';
}
}
};
</script>
</head>
<body>
<form id="sendeform">
<input type="hidden" name="gruppen" id="gruppenfeld">
</form>
<div id="gruppentab" class="browsersortdiv"></div>
<div id="gruppentabplus"></div>
<script>
var dataobj = {
liste : {
10 : 'Test',
20 : 'Familie',
30 : 'Bekannte',
40 : 'Stadt',
50 : 'Land',
60 : 'Fluss',
70 : 'Verein',
90 : 'Organisation'
},
vergeben : [20,40],
darfaendern : 1,
darfanlegen : 1,
namegruppe : 'Gruppe',
praefixneu : 'neu'
};
gruppenselect_init(dataobj);
</script>
</body>
</html>
