使用javascript更新select onchange事件上的文本框

Question

Hello i got a selection menu, i need to update 3 text boxes when the selection is done, and should load a default 1 as follows..

    <select name="select" id="select">
      <option value="1">selection 1</option>
      <option value="2">selection 2</option>
      <option value="3">selection 3</option>
    </select>

    <input type="text" name="txt1" id="txt1" value="1"/>
    <input type="text" name="txt2" id="txt2" value="2"/>
    <input type="text" name="txt3" id="txt3" value="3"/>

// if selection 1 is selected text box's values should come as follows, (Default)
id="txt1" value="1" >> id="txt2" value="2" >> id="txt3" value="3"

// if selection 2 is selected text box's values should come as follows,
id="txt1" value="4" >> id="txt2" value="5" >> id="txt3" value="6"

// if selection 3 is selected text box's values should come as follows,
id="txt1" value="7" >> id="txt2" value="8" >> id="txt3" value="9"

any JavaScript help?? many thanks!!!

Answer 1

I am a bit late, but here is it:

$('select').change(function(){
  var sel=$(this).val();
    $('input[type=text]').each(function(i,el){
      $(el).val((i+1)+(sel-1)*3); 
    }); 
});

Edit :

Here is an example with a text input: http://jsfiddle.net/4LGWx/4/

t=['one','two','three','four','five','six','seven','eight','nine'];
$('select').change(function(){
  var sel=$(this).val();
    $('input[type=text]').each(function(i,el){
      $(el).val(t[i+(sel-1)*3]);
    });
});

or a slightly more elegant variant thereof:

$('select').change(function(){
  var t=[['one','two','three'],
         ['four','five','six'],
         ['seven','eight','nine']];
  var sel=$(this).val()-1;
    $('input[type=text]').each(function(i,el){
      $(el).val(t[i][sel]);
    });
});

(This time there is no global array ...)

Answer 2

pure javascript implementation:

(function (){
    var dd = document.getElementById('select');

    //get the text inputs into an array
    var inputs = ['txt1','txt2','txt3'].map(function(a){
      return document.getElementById(a);
    });

    //use an object to map the select values to the desired input values
    //this can be an object returned from your server or wherever.
    var inputValues = {'1':['abe','lincoln','president'],'2':['bob','dylan','song n dance man'],'3':['numbers',1,'two']};

    //bind the change event to the select 
    dd.onchange=function(e){

      //get the selected value of the drop down
      var selectedValue = dd.children[dd.selectedIndex].value;

      //change the values of the inputs
      for(var i = 0,j=inputs.length;i < j;i++){
        inputs[parseInt(i,10)].value = inputValues[selectedValue][i];
      }
    };
})();

JSBIN

Answer 3

You can just monitor the select and make the changes from there:

var t1 = $('#txt1');
var t2 = $('#txt2');
var t3 = $('#txt3');

$('#select').on('change', function(e) {
    var v = $(this).val();

    if('1' === v) {
        t1.val('1');
        t2.val('2');
        t3.val('3');

    } else if('2' === v) {
        t1.val('4');
        t2.val('5');
        t3.val('6');

    } else if('3' === v) {
        t1.val('7');
        t2.val('8');
        t3.val('9');

    }
}

Answer 4

HTML:

<select name="select" id="select">
  <option value="1">selection 1</option>
  <option value="4">selection 2</option>
  <option value="7">selection 3</option>
</select>

<input type="text" name="txt1" id="txt1" value="1"/>
<input type="text" name="txt2" id="txt2" value="2"/>
<input type="text" name="txt3" id="txt3" value="3"/>

jQuery:

$(document).ready(function(){
  $('#select').change(function(){
    $select = $(this);
    $('input[id|="txt"]').each(function(i){
      $(this).val($select.val() + i);
    });
  });
});

Answer 5

Assign a class to your textboxes for easier manipulation:

<input type="text" name="txt1" id="txt1" value="1" class="txt"/>
<input type="text" name="txt2" id="txt2" value="2" class="txt"/>
<input type="text" name="txt3" id="txt3" value="3" class="txt"/>

JQuery:

$("#select").change(function(event){
    var selectedValue = parseInt($(this).val());
    $(".txt").each(function(){
        $(this).val(parseInt(this.defaultValue) + (selectedValue-1)*3);
    });
});

Notice the defaultValue . This is the value assigned in the html and does not change when you set the current value to another value.

DEMO