✔ Mehrfachauswahl ohne STRG-Taste in Select-Box

B

bombbass

Grünschnabel
Guten Morgen Community,
ich bin seit gestern an einem Problem dran, was ich leider mit Hilfe von www nicht lösen konnte, wobei ich auch sagen muss, dass ich in Sachen Javascript nicht der Hellste bin :confused:

Situation:
ich habe einen Select Box mit 5 Options und möchte eine Mehrfachauswahl machen ohne die STRG-Taste gedrückt zu halten, d.h. der User klickt auf die 1. Option, diese wird markiert. ANschließend betätigt der User die 3.Option, diese wird natürlich auch markiert, aber die 1.OPtion bleibt auch markiert (da vorher ja schon angewählt)!

Mein bisheriger Lösungsweg:
HTML: 
<html><head>
<script type="text/javascript">
function AuswahlReset() {
   for (i = 0; i < document.f1.Project.length; i++){
    if (document.f1.Project.options[i].selected == true){
      document.f1.Project.options[i].selected = true;
    }
    else {
    	document.f1.Project.options[i].selected = false;
    }
   }
}
</script>

</head>
<body>
<form name="f1" method="" action="" >
<select name='Project' size='10' multiple onchange='AuswahlReset()' >
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>
</form>
</body>
</html>

Problem:
Leider, wie ihr es ja euch vorstellen könnt, passiert gar nichts, d.h. die 1.Markierung wird aufgehoben, sobald ich eine 2. Markierung erhalten möchte :eek:

Bitte um Hilfe...
Danke
VG
bombbass
 
Hi,

du könntest die Indizes der gewählten Optionen in einem Array speichern. Im onchange-Handler prüfst du dann in einer Schleife, ob die Option ausgewählt werden muss.

Beispiel:
Code: 
<html><head>
<script type="text/javascript">
var arrSel = new Array();
function AuswahlReset(objSel){
  arrSel[String(objSel.selectedIndex)] = true;

  for(var i=0; i<objSel.options.length; i++){
    if(arrSel[String(i)]){
      objSel.options[i].selected = true;
    }
  }
}
</script>

</head>
<body>
<form name="f1" method="" action="">
<select name='Project' size='10' multiple onchange='AuswahlReset(this)' >
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>
</form>
</body>
</html>

Ciao
Quaese
 
sieht schonmal sehr gut aus, danke...

jedoch gibt es noch ein problem:

was muss ich anstellen, wenn ich einen auswahl wieder deaktivieren möchte,
d.h. 1.option ist gewählt und markiert, danach wählt der User die 4.Option, dies wird auch markiert und die 1.OPtion bleibt auch markiert (bis hierhin wunderbar), und dann entscheidet sich der User doch gegen die 1.Option und will diese wieder aufheben...

leider ist dies momentan nicht möglich (!)

HTML: 
<script type="text/javascript">
var arrSel = new Array();
function AuswahlReset(objSel){
  arrSel[String(objSel.selectedIndex)] = true;

  for(var i=0; i<objSel.options.length; i++){
    if(arrSel[String(i)]){
      objSel.options[i].selected = true;
    }
  }
}
</script>
 
Zuletzt bearbeitet:
Ich hab jetzt keine Lust dir den Code zu schreiben...
Du musst einfach abfragen ob das Element schon im Array vorhanden ist, wenn nein, füge es hinzu, wenn ja entferne es wieder.
 
danke dir,

jedoch bekomme ich es nicht hin, wie schon gesagt, bin ein JS-Newbie...

hier, das was ich geschafft habe:

HTML: 
<script type="text/javascript">
var arrSel = new Array();
function AuswahlReset(objSel){
  arrSel[String(objSel.selectedIndex)] = true;

  for(var i=0; i<objSel.options.length; i++){
    if(arrSel[String(i)]){
      objSel.options[i].selected = true;
    }
    else {
    	objSel.options[i].selected = false;
    }
  }
}
</script>
 
so hab es nun anders hinbekommen!!

Für die jenigen, die sich dafür interessieren:

HTML: 
<html>
<head> 
<script type="text/javascript">
selected = [];
function AuswahlReset() {
  var save = document.f1.Project.options[document.f1.Project.selectedIndex].selected;
  if (save == true && selected[document.f1.Project.selectedIndex] == true) selected[document.f1.Project.selectedIndex] = false; else selected[document.f1.Project.selectedIndex] = true;
  for (i = 0; i < document.f1.Project.length; i++){
    if (selected[i]) document.f1.Project.options[i].selected = true;
      else document.f1.Project.options[i].selected = false;
  }
}
</script> 
</head>
<body> 
<form name="f1" method="" action="" > 
<select name='Project' size='10' multiple onchange='AuswahlReset()' > 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
</select> 
</form> 
</body>
</html>
 
hallo ich bin es nochmal...
wie schon gesagt, es läuft alles wunderbar, jedoch habe ich ein problem, wenn eine option schon vorselektiert ist (<option selected>3</option>)...

dann verschwindet diese, wenn ich eine andere Option dazu wählen möchte...
Lösung?
Danke
 
Hi,

du könntest die Funktion im onload-Event aufrufen.
Code: 
<html><head>
<script type="text/javascript">
var arrSel = new Array();
function AuswahlReset(objSel){
  arrSel[String(objSel.selectedIndex)] = (arrSel[String(objSel.selectedIndex)])? false : true;

  for(var i=0; i<objSel.options.length; i++){
    objSel.options[i].selected = (arrSel[String(i)])? true : false;
  }
}

window.onload = function(){
  AuswahlReset(document.f1.Project);
}
</script>

</head>
<body>
<form name="f1" method="" action="">
<select name='Project' size='10' multiple onchange='AuswahlReset(this)' >
  <option selected="selected">1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</form>
</body>
</html>

Ciao
Quaese
 
ach ich idiot ;-)

klappt wunderbar

Meine letzte Frage:
Wie kriege ich es hin, dass ich alle Markierungen wieder deaktiviere, d.h. die 1.Option und die 4.Option sind markiert. Nun drücke ich auf die 1.option, diese verschwindet, anschließend drücke ich auf die 4.Option, diese kann jedoch nicht verschwinden
Wie löse ich dieses Problem?

Danke

VG
 
Hi,

du kannst das Selektfeld in einem solchen Fall neu aufbauen. Du benötigst hierfür das das alte Dropdown-Feld, aus dem die Optionen in das neue übernommen werden. Anschliessend wird das alte durch das neue ersetzt und das Speicherarray gelöscht.

Beispiel, wie eine solche Funktion aussehen könnte.
Code: 
function ResetAll(objSel){
  // Neues Selekt-Element erstellen
  if(document.all && !window.opera) // IE
    var objNewSel = document.createElement("<select name='Project' size='10' multiple>");
  else{                             // Sonstige
    var objNewSel = document.createElement("select");
    objNewSel.size = 10;
    objNewSel.multiple = true;
  }
  // onchange-Event
  objNewSel.onchange = function(){
    AuswahlReset(this);
  }

  // Optionen des Ausgangsselekt-Feldes in neues einhängen
  for(var i=0; i<objSel.options.length; i++){
    objNewSel.options[objNewSel.options.length] = new Option(objSel.options[i].text, objSel.options[i].value);
  }

  // Altes Selektfeld durch neues ersetzen
  objSel.parentNode.replaceChild(objNewSel, objSel);
  // Bisheriges Speicherarray für Optionen löschen
  arrSel.length = 0;
}

Die Funktion erwartet als Argument das alte Selekt-Feld.

Die Funktion kann wenn die notwendigen Kriterien erfüllt sind, aus der anderen Routine (AuswahlReset) heraus aufgerufen werden. Das solltest du aber selbst realisieren können.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück