---
title: "Select, onchange -> ny värden i textinputs."
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/179774-select-onchange-ny-värden-i-textinputs"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "renkott"
published: "2009-08-13T20:51:59.000Z"
updated: "2009-08-15T16:29:32.000Z"
replies: 4
views: 693
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/179774-select-onchange-ny-värden-i-textinputs"
---

# Select, onchange -> ny värden i textinputs.

## #1 — renkott, 2009-08-13T20:51Z

<http://durkslag.com/php/java.html>

Jag skulle önska ett java script som reagerar på selecten.

Rad1:
Väljs 1 på rad1 så skrivs det i första fältet till höger ut "Artikel 1" och "10:-" i andra fältet.
Väljs 2 på rad1 så skrivs det i första fältet till höger ut "Artikel 2" och "20:-" i andra fältet.
Osv.

Rad 2 vill jag att ska funka på samma sätt som Rad1.

Hoppas ni förstår vad jag mennar och kan tänka er att hjälpa mig.

Permalänk: https://www.webforum.nu/p/179774

## #2 — Peter S, 2009-08-14T09:23Z

Hoppas sktrukturen framgår så att du själv kan lägga till fler options och selects, annars får du hojta till  :)

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    var mappings = {
        s1: {
            1: ["Artikel 1", "10:-"],
            2: ["Artikel 2", "20:-"],
            3: ["Artikel 3", "30:-"]
        },
        s2: {
            1: ["Artikel 10", "100:-"],
            2: ["Artikel 11", "110:-"],
            3: ["Artikel 12", "120:-"]
        }
    };

    window.onload = function(){
        var elms = document.getElementsByTagName("select");
        for (var i = 0; i < elms.length; ++i)
            if (elms[i].name in mappings)
                elms[i].onchange = selectChange;
    }

    function selectChange(){
        var opt = this.options[this.selectedIndex];
        var rowIndex = /\d+$/.exec(this.name);
        var tb1 = this.form.elements["t" + rowIndex + "_1"];
        var tb2 = this.form.elements["t" + rowIndex + "_2"];
        if (opt.value.length == 0){
            tb1.value = "";
            tb2.value = "";
        } else {
            tb1.value = mappings[this.name][opt.value][0];
            tb2.value = mappings[this.name][opt.value][1];
        }
    }
  </script>
  </head>
  <body>
  <form>
  Rad 1:<br>

  <select name="s1">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
      <input name="t1_1" value="">

      <input name="t1_2" value="">
<br><br>
Rad 2:<br>
  <select name="s2">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t2_1" value="">
      <input name="t2_2" value="">
  </form>
  </body>
</html>
```

Permalänk: https://www.webforum.nu/p/2198675

## #3 — renkott, 2009-08-14T13:05Z

Great  :bire
Om jag vill hämta data från samma register, finns det något smidigare sätt än så här att lösa det? Försökte mig på s2 = s1 men det fick jag inte att funka, vilket kanske inte är så konstigt med en array?

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    var mappings = {
        s1: {
            1: ["Artikel 1", "10", "kr/st"],
            2: ["Artikel 2", "20", "kr/a 100pack"],
            3: ["Artikel 3", "30", "kr/h"]
        },
        s2: {
            1: ["Artikel 1", "10", "kr/st"],
            2: ["Artikel 2", "20", "kr/a 100pack"],
            3: ["Artikel 3", "30", "kr/h"]
        },
        s3: {
            1: ["Artikel 1", "10", "kr/st"],
            2: ["Artikel 2", "20", "kr/a 100pack"],
            3: ["Artikel 3", "30", "kr/h"]
        }
                
    };

    window.onload = function(){
        var elms = document.getElementsByTagName("select");
        for (var i = 0; i < elms.length; ++i)
            if (elms[i].name in mappings)
                elms[i].onchange = selectChange;
    }

    function selectChange(){
        var opt = this.options[this.selectedIndex];
        var rowIndex = /\d+$/.exec(this.name);
        var tb1 = this.form.elements["t" + rowIndex + "_1"];
        var tb2 = this.form.elements["t" + rowIndex + "_2"];
        var tb3 = this.form.elements["t" + rowIndex + "_3"];
        if (opt.value.length == 0){
            tb1.value = "";
            tb2.value = "";
            tb3.value = "";
        } else {
            tb1.value = mappings[this.name][opt.value][0];
            tb2.value = mappings[this.name][opt.value][1];
            tb3.value = mappings[this.name][opt.value][2];
        }
    }
  </script>
  </head>
  <body>
  <form>
  Rad 1:<br>

  <select name="s1">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
      <input name="t1_1" value="">
      <input name="t1_2" value="">
      <input name="t1_3" value="">
<br><br>
Rad 2:<br>
  <select name="s2">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t2_1" value="">
      <input name="t2_2" value="">
      <input name="t2_3" value="">
     
<br><br>
Rad 3:<br>
  <select name="s3">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t3_1" value="">
      <input name="t3_2" value="">
      <input name="t3_3" value="">      
  </form>
  </body>
</html>
```

Permalänk: https://www.webforum.nu/p/2198713

## #4 — Peter S, 2009-08-14T22:21Z

Like so:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    var mappings = {
        1: ["Artikel 1", "10", "kr/st"],
        2: ["Artikel 2", "20", "kr/a 100pack"],
        3: ["Artikel 3", "30", "kr/h"]       
    };

    window.onload = function(){
        var elms = document.forms[0].elements;
        var selects = ["s1", "s2", "s3"];
        for (var i = 0; i < selects.length; ++i)
            elms[selects[i]].onchange = selectChange;
    }

    function selectChange(){
        var opt = this.options[this.selectedIndex];
        var rowIndex = /\d+$/.exec(this.name);
        var tb1 = this.form.elements["t" + rowIndex + "_1"];
        var tb2 = this.form.elements["t" + rowIndex + "_2"];
        var tb3 = this.form.elements["t" + rowIndex + "_3"];
        if (opt.value.length == 0){
            tb1.value = "";
            tb2.value = "";
            tb3.value = "";
        } else {
            tb1.value = mappings[opt.value][0];
            tb2.value = mappings[opt.value][1];
            tb3.value = mappings[opt.value][2];
        }
    }
  </script>
  </head>
  <body>
  <form>
  Rad 1:<br>

  <select name="s1">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>
      <input name="t1_1" value="">
      <input name="t1_2" value="">
      <input name="t1_3" value="">
<br><br>
Rad 2:<br>
  <select name="s2">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t2_1" value="">
      <input name="t2_2" value="">
      <input name="t2_3" value="">
     
<br><br>
Rad 3:<br>
  <select name="s3">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>

  </select>
      <input name="t3_1" value="">
      <input name="t3_2" value="">
      <input name="t3_3" value="">      
  </form>
  </body>
</html>
```

Permalänk: https://www.webforum.nu/p/2198764

## #5 — renkott, 2009-08-15T16:29Z

UNDERBART  :e
Tack så mycket för hjälpen  :r

Permalänk: https://www.webforum.nu/p/2198834

---

Tråden på webben: https://www.webforum.nu/amne/javascript/179774-select-onchange-ny-värden-i-textinputs
