<select> Bereiche dynamisch ein- bzw. ausblenden

S

SYSmark

Grünschnabel
Hi,

sitze jetzt schon ewig an dem Problem und suche fast genausolange schon im Netz nach einer Lösung... aber komme irgendwie nicht weiter.

ich möchte mittels Checkbox jeweils eine Auswahlliste ein- bzw. ausblenden.
Ist das mit JS möglich? wenn ja.. wie?

Hier mal mein Quellcode, um den es sich handelt:

Code: 
<html>
<head>
<script language="JavaScript">
<!--
function Buchstabeneingabe(Wert,idx){
  for(i=0; i<document.getElementById(idx).options.length; i++){
    if(Wert.substr(0, Wert.length).toLowerCase()==document.getElementById(idx).options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length!=0){
      document.getElementById(idx).options[i].selected = true;
      break;
}}}
//-->
</script>
<title></title>
</head>
<body>
<form name="Formular">
<table border="0">
  <tr>
   <td>
    <input type="Checkbox" name="cListe1" value="Liste1">Liste1 &nbsp;
    <input type="Checkbox" name="cListe2" value="Liste2">Liste2 &nbsp;
    <input type="Checkbox" name="cListe3" value="Liste3">Liste3
   </td>
  </tr>
 </table>

 <table border="0">
  <tr>
   <td>
    <input name="input" onKeyUp="Buchstabeneingabe(this.value, 'Liste1');" type="text"><br>
    <select id="Liste1" size="5">
     <option value="000001">000001</option>
     <option value="000002">000002</option>
     <option value="100011">100011</option>
     <option value="120323">120323</option>
     <option value="123533">123533</option>
    </select>
   </td>
   <td>
    <input name="input" onKeyUp="Buchstabeneingabe(this.value, 'Liste2');" type="text"><br>
    <select id="Liste2" size="5">
     <option value="000001">000001</option>
     <option value="000002">000002</option>
     <option value="100011">100011</option>
     <option value="120323">120323</option>
     <option value="123533">123533</option>
    </select>
   </td>
   <td>
    <input name="input" onKeyUp="Buchstabeneingabe(this.value, 'Liste3');" type="text"><br>
    <select id="Liste3" size="5">
     <option value="000001">000001</option>
     <option value="000002">000002</option>
     <option value="100011">100011</option>
     <option value="120323">120323</option>
     <option value="123533">123533</option>
    </select>
   </td>
  </tr>
 </table>

 </form>

</body>
</html>

Thx schon mal im voraus...

greetZz SYS
 
Zuletzt bearbeitet:
oh.. danke...
da gilt wohl der Spruch "Vor Bäumen den Wald nicht mehr gesehen" :rolleyes:

Quellcode wäre dann also entsprechend:

Code: 
<html>
<head>
<script language="JavaScript">
<!--

function Buchstabeneingabe(Wert,idx){
  for(i=0; i<document.getElementById(idx).options.length; i++){
    if(Wert.substr(0, Wert.length).toLowerCase()==document.getElementById(idx).options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length!=0){
      document.getElementById(idx).options[i].selected = true;
      break;
    }
  }
}

 function showList(feld) {
    if(feld=='0') {var f_id='sListe1';}
    if(feld=='1') {var f_id='sListe2';}
    if(feld=='2') {var f_id='sListe3';}
    if (document.Formular.elements[feld].checked == true) {
      document.getElementById(f_id).style.display='';
    }
    else{
      document.getElementById(f_id).style.display='none';
    }
  }
//-->
</script>
</head>
<body>

<form name="Formular">

 <table border="0" height="20">
  <tr valign="top">
   <td>
    <input type="Checkbox" name="cListe1" value="Liste1" onClick="showList(0)">Liste1 &nbsp;
    <input type="Checkbox" name="cListe2" value="Liste2" onClick="showList(1)">Liste2 &nbsp;
    <input type="Checkbox" name="cListe3" value="Liste3" onClick="showList(2)">Liste3
   </td>
  </tr>
 </table>
<br>
 <table border="0" height="150">
  <tr valign="top">
   <td>
    <div id="sListe1" style="display='none'">
     <input name="input" onKeyUp="Buchstabeneingabe(this.value, 'Liste1');" type="text"><br>
     <select id="Liste1" size="5" >
      <option value="000001">000001</option>
      <option value="000002">000002</option>
      <option value="100011">100011</option>
      <option value="120323">120323</option>
      <option value="123533">123533</option>
     </select>
    </div>
   </td>
   <td>
    <div id="sListe2" style="display='none'">
     <input name="input" onKeyUp="Buchstabeneingabe(this.value, 'Liste2');" type="text"><br>
     <select id="Liste2" size="5">
      <option value="000001">000001</option>
      <option value="000002">000002</option>
      <option value="100011">100011</option>
      <option value="120323">120323</option>
      <option value="123533">123533</option>
     </select>
    </div>
   </td>
   <td>
    <div id="sListe3" style="display='none'">
     <input name="input" onKeyUp="Buchstabeneingabe(this.value, 'Liste3');" type="text"><br>
     <select id="Liste3" size="5">
      <option value="000001">000001</option>
      <option value="000002">000002</option>
      <option value="100011">100011</option>
      <option value="120323">120323</option>
      <option value="123533">123533</option>
     </select>
    </div>
   </td>
  </tr>
 </table>
<br>
 <table border="0" height="100">
  <tr valign="top">
   <td>
    <textarea name="test" cols="10" rows="5"></textarea>
   </td>
  </tr>
 </table>

 </form>

</body>
</html>


super.. genau das was ich gesucht hatte.

und gleich die nächste Frage hinterher...
vielleicht noch ein Tip, wie ich jetzt einen Wert aus der Liste durch anklicken in das Textfeld unten bekomme? Bzw. wenn es mal drin ist, durch einen Klick darauf im Textfeld das auch wieder da raus bekomme?

mit einem Wert geht es einwandfrei folgendermaßen:
(ich post hier nur noch die Codefetzen, mit den Änderungen zu oben)
Code: 
<html>
<head>
<script language="JavaScript">
<!--

[...]


function mogo(s_id,t_id){
  if (document.getElementById(s_id).options[document.getElementById(s_id).selectedIndex].value != "none") {
    document.getElementById(t_id).value = document.getElementById(s_id).options[document.getElementById(s_id).selectedIndex].value
  }
}
//-->
</SCRIPT>
</head>
<body>

<form name="Formular">

 <table border="0" height="20">
  <tr valign="top">
   <td>
    <div id="sListe1" style="display='none'">
     <input name="input" type="text"><br>
     <select name="t1" id="Liste1" size="5" onchange="mogo('Liste1','Test1');">
      <option value="000001">000001</option>
      <option value="000002">000002</option>
      <option value="100011">100011</option>
      <option value="120323">120323</option>
      <option value="123533">123533</option>
     </select>
    </div>
   </td>
   <td>
[...]
   </td>
  </tr>
 </table>
<br>
 <table border="0" height="100">
  <tr valign="top">
   <td>
    <textarea name="test" id="Test1" cols="10" rows="5"></textarea>
   </td>
  </tr>
 </table>

 </form>

[...]

aber wie lässt es sich realisieren, dass mehrere Werte per Click nacheinander hinzugefügt werden können... und wie kann ich sie wieder entfernen?


greetZz SYS
 
Zuletzt bearbeitet:
Die Funktion zum verstecken der Listen geht auch noch schöner:
HTML: 
function showList(obj) {
     	document.getElementById('s'+obj.value).style.display = 
     		(obj.checked) ? 'none' : 'block';
 }
Wird dann so aufgerufen:
HTML: 
<input type="Checkbox" name="cListe1" value="Liste1" onClick="showList(this)">
Vorteil: Kleinerer Aufruf, kleinere Funktion => Mindestens 65% Code-Ersparnis.

==============================================================================================

Was das andere Problem angeht:
HTML: 
function mogo(obj,target) {
 	var text = obj.options[obj.selectedIndex].value + '\n';
 	target = document.getElementById(target);
 	target.value = (target.value.indexOf(text) == -1)
 		? target.value + text
 		: target.value.replace(text,'');
 }
Aufgerufen so mit onclick (nicht mit onchange):
HTML: 
<select id="Liste1" size="5" onclick="mogo(this,'Test1')">
             	<option value="000001">000001</option>
             	<option value="000002">000002</option>
             	<option value="100011">100011</option>
             	<option value="120323">120323</option>
             	<option value="123533">123533</option>
    </select>
Bei diesen Textfeld:
HTML: 
<textarea id="Test1" cols="6" rows="5"></textarea>

P.S.
Du tätest gut daran, dich mit W3C-Standarts anzfreunden: <script language="JavaScript"> ist nämlich "depreciated" (zu Deutsch: "unerwünscht, abgeschrieben, erledigt") benutze type="text/javascript" sattdessen und auch sonst wäre das mal eine gute Idee.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück