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

你好，我有一份选择菜单， 选择完成后，我需要更新3个文本框，并应加载默认值1，如下所示

    <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"

选择1
选择2
选择3
//如果选择“选择1”，文本框的值应如下所示（默认值）
id=“txt1”value=“1”>>id=“txt2”value=“2”>>id=“txt3”value=“3”
//如果选择了“选择2”，则文本框的值应如下所示：，
id=“txt1”value=“4”>>id=“txt2”value=“5”>>id=“txt3”value=“6”
//如果选择了选择3，文本框的值应如下所示：，
id=“txt1”value=“7”>>id=“txt2”value=“8”>>id=“txt3”value=“9”

有JavaScript帮助吗？？

---

非常感谢

您只需监视

选择
并从中进行更改：

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');

    }
}

HTML:

为文本框指定一个类以便于操作：

<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"/>

请注意
defaultValue
。这是在html中指定的值，当您将当前值设置为其他值时不会更改

我有点晚了，但事情是这样的：

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

编辑：

下面是一个文本输入示例：

或其稍微优雅的变体：

$('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]);
    });
});

（这次没有全局数组…
纯javascript实现：

(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];
      }
    };
})();

（函数（）{
var dd=document.getElementById（'select'）；
//将文本输入获取到数组中
变量输入=['txt1'，'txt2'，'txt3'].map（函数（a）{
返回文档.getElementById（a）；
});
//使用对象将选择值映射到所需的输入值
//这可以是从服务器或任何地方返回的对象。
var inputValues={'1'：['abe'，'lincoln'，'president']，'2'：['bob'，'dylan'，'song n dance man']，'3'：['numbers'，1，'two']；
//将更改事件绑定到select
dd.onchange=功能（e）{
//获取下拉列表的选定值
var selectedValue=dd.children[dd.selectedIndex].value；
//更改输入值
对于（变量i=0，j=inputs.length；i

Basic JS，创建一个
onchange
事件，根据选择值更新文本框。要开始使用：
document.getElementById（“select”）.onchange=function（）{console.log（this.value）；//select value}
我在我的answer@Khanh感谢演示，但有时我需要将文本传递到文本框值（不仅仅是1,2,3）。所以我需要预先定义它们不？？所以你能不能也编辑一下这个？？再次感谢。@user2645118请参阅下面我关于如何将任何值映射到文本框集合的答案。您可能希望在此处使用switch case。@jterry我尝试了您的代码，但它不起作用？你错过什么了吗。你能再检查一下吗谢谢！！！感谢您的回复，但我需要将不同的值传递到文本框，我只需输入“1,2,3”作为示例。我可以用这个代码吗？有什么帮助吗？？谢谢。谢谢演示，但有时我需要将文本传递到文本框值（不仅仅是1,2,3）。所以我需要预先定义它们不？？所以你能不能也编辑一下这个？？再次感谢…
el
是每个回调函数传递的当前DOM元素，
i
是
每个
集合中的索引（基于零，这就是为什么我必须在
（i+1）
中添加1）并且
sel
是您元素的选定值。但是我需要传递不同的值，不仅是1,2,3我还需要传递单词，您能编辑这个吗，谢谢！！！！您可以从任何地方获取值。当你阅读我的文章时，你可以使用索引i从之前在某处定义的数组中获取值，或者你可以从另一个回调函数中获取值。。。
$('select').change(function(){
  var sel=$(this).val();
    $('input[type=text]').each(function(i,el){
      $(el).val((i+1)+(sel-1)*3); 
    }); 
});

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]);
    });
});

$('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]);
    });
});

(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];
      }
    };
})();