Question

你好我有一个选择菜单，我需要在选择完成后更新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帮助？非常感谢!!!

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

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

Answer 2

纯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

Answer 3

您只需监控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');

    }
}

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

将一个类分配给文本框以便于操作：

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

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

DEMO

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

5 个答案: