Avatar billede forceprogrammer Nybegynder
30. januar 2005 - 16:57 Der er 2 kommentarer

flytte værdier fra 2 listbokse og lægge værdierne i en tabel

Jeg skal lave et javascript der kan tage alle værdier der er blevet valgt i 2 forskellige selectbokse.
Disse værdier skal kombineres således at hver valgt værdi fra boks 1 bliver kombineret med alle valgte værdier fra boks 2.
Altså et 1 til mange forhold.

Disse værdier vil jeg flytte ned i en tabel hvor der laves en appendchild for hver række.

Altså et eksempel.

listboks 1 har følgende værdier
opt1.1 <--selected
opt1.2
opt1.3 <--selected
listboks 2 har følgende værdier
opt2.1 <--selected
opt2.2 <--selected
opt2.3 <--selected
tabellen skal så indeholde:
opt1.1 - opt2.1
opt1.1 - opt2.2
opt1.1 - opt2.3
opt1.3 - opt2.1
opt1.3 - opt2.2
opt1.3 - opt2.3

Altså jeg håber jeg har gjort mig selv sådan nogenlunde forståelig. Er det noget der kan laves i javascript?

Jeg håbede der måske var en der ville hjælpe med et lille eksempel :)
Avatar billede roenving Novice
30. januar 2005 - 17:16 #1
Sådan ?-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
<script language="javascript" type="text/javascript">
function genererTabel(but){
  var f = but.form;
  var sel1 = f.minSelect;
  var sel2 = f.minSelect2;
  var t = document.getElementById("tabellen");
  while(t.childNodes.length>1)
    t.removeChild(t.childNodes[1]);
  var newTD,newTR,num=0;
 
  for(i=0;sel1.length>i;i++){
    if(sel1.options[i].selected){
      for(j=0;sel2.length>j;j++){
        if(sel2.options[j].selected){
          num++;
          newTR = document.createElement("TR");
          newTD = document.createElement("TD");
          newTR.appendChild(newTD);
          newTD.innerHTML = num;
          newTD = document.createElement("TD");
          newTR.appendChild(newTD);
          newTD.innerHTML = sel1.options[i].value;
          newTD = document.createElement("TD");
          newTR.appendChild(newTD);
          newTD.innerHTML = sel2.options[j].value;
          t.appendChild(newTR);
        }
      }
    }
  }
}
</script>
</head>

<body>
<form id="minForm" name="minForm">
<select name="minSelect" multiple id="minSelect">
    <option value="">-- Vælg her --<br>
    <option value="1">1<br>
    <option value="2">2<br>
    <option value="3">3<br>
</select>
<br>
<br>
<select name="minSelect2" multiple id="minSelect2">
    <option value="">-- Vælg her --<br>
    <option value="1">1<br>
    <option value="2">2<br>
    <option value="3">3<br>
</select>
<br>
<br>
<button onclick="genererTabel(this);return false;">Lav tabel</button>
</form>
<br>
<br>
<table><tbody id="tabellen">
  <tr>
    <td>#</td>
    <td>Værdi 1</td>
    <td>Værdi 2</td>
  </tr></tbody>
</table>
</body>

</html>
Avatar billede roenving Novice
30. januar 2005 - 17:47 #2
Hrm, der skal lige tages højde for en evt. tom tekst-node i Gecko-browserne:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/586216">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
<script language="javascript" type="text/javascript">
if(!document.referrer)alert('Ingen steder');
function genererTabel(but){
  var f = but.form;
  var sel1 = f.minSelect;
  var sel2 = f.minSelect2;
  var t = document.getElementById("tabellen");
  var num = 1+((typeof t.firstChild.innerHTML=='undefined')?1:0);
  while(t.childNodes.length>num)
    t.removeChild(t.childNodes[t.childNodes.length-1]);
  var newTD,newTR,num=0;
 
  for(i=0;sel1.length>i;i++){
    if(sel1.options[i].selected){
      for(j=0;sel2.length>j;j++){
        if(sel2.options[j].selected){
          num++;
          newTR = document.createElement("TR");
          newTD = document.createElement("TD");
          newTR.appendChild(newTD);
          newTD.innerHTML = num;
          newTD = document.createElement("TD");
          newTR.appendChild(newTD);
          newTD.innerHTML = sel1.options[i].value;
          newTD = document.createElement("TD");
          newTR.appendChild(newTD);
          newTD.innerHTML = sel2.options[j].value;
          t.appendChild(newTR);
        }
      }
    }
  }
}
</script>
</head>

<body>
<form id="minForm" name="minForm">
<select name="minSelect" multiple id="minSelect">
    <option value="">-- Vælg her --<br>
    <option value="1">1<br>
    <option value="2">2<br>
    <option value="3">3<br>
</select>
<br>
<select name="minSelect2" multiple id="minSelect2">
    <option value="">-- Vælg her --<br>
    <option value="1">1<br>
    <option value="2">2<br>
    <option value="3">3<br>
</select>
<br>
<button onclick="genererTabel(this);return false;">Lav tabel</button>
</form>
<br>
<br>
<table><tbody id="tabellen">
  <tr>
    <td>#</td>
    <td>Værdi 1</td>
    <td>Værdi 2</td>
  </tr></tbody>
</table>
</body>

</html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester