0

您好，我有一个选择菜单，选择完成后我需要更新 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"

任何 JavaScript 帮助？非常感谢！！！

4

5 回答 5

1

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

JSBIN

于 2013-08-20T14:37:52.703 回答
1

我有点晚了，但这里是：

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

编辑：

这是一个带有文本输入的示例：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]);
    });
});

或更优雅的变体：

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

（这次没有全局数组……）

于 2013-08-20T14:21:25.270 回答
0

您可以select从那里监视并进行更改：

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

    }
}
于 2013-08-20T14:12:45.140 回答
0

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);
    });
  });
});
于 2013-08-20T14:15:37.953 回答
0

为您的文本框分配一个类以便于操作：

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

查询：

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

注意defaultValue. 这是在 html 中分配的值，当您将当前值设置为另一个值时不会更改。

演示

于 2013-08-20T14:15:52.543 回答