Question

在我的程序中，有一个下拉列表：

<select id='selectValue'>
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
<option>Value4</option>
</select>

然后，有三个文本框如下：

<input type='text' id='textbox1' class='textbox'>
<input type='text' id='textbox2' class='textbox'>
<input type='text' id='textbox3' class='textbox'>

当我从下拉列表中选择一个值时，该值将输入到其中一个为空的文本框中。但是不应将值输入多个空文本框。 请注意，首先所有文本框都为空。

实现此目的的jQuery或JavaScript代码应该是什么？

更新

到目前为止我已经这样做了。

$("#selectValue").on("change",function(){

    var selectedValue = $(this).val();

for(i=1;i<=3;i++)
        var textbox = "#textbox" + i;
    var nextTextbox = "#textbox" + (i+1);
        if(!$(textbox).val()){
            $(textbox).val(selectedValue);
        }
        else{
            $(nextTextbox).val(selectedValue);
    }
});

Answer 1

这样的事情：

<强> HTML：

<select id='selectValue'>
    <option value="0">--Select--</option>
    <option value="Value1">Value1</option>
    <option value="Value2">Value2</option>
    <option value="Value3">Value3</option>
    <option value="Value2">Value4</option>
</select>

<input type='text' id='textbox1' class='textbox' />
<input type='text' id='textbox2' class='textbox' />
<input type='text' id='textbox3' class='textbox' />

jQuery的：

$('#selectValue').on('change', function(){
   var selectedValue = $(this).val();
    if(selectedValue != '0'){
        var textboxes = $('.textbox');       
        for(var i = 0; i < textboxes.length; i++){
            if($(textboxes[i]).val() == ''){
                $(textboxes[i]).val(selectedValue);
                break;
            }
        }
    }
});

DEMO

Answer 2

现在正在运作。

$("#selectValue").on("change",function(){

var selectedValue = $(this).val();

for(i=1;i<=3;i++){
    var textbox = "#textbox" + i;
    if(!$(textbox).val()){
        $(textbox).val(selectedValue);
break;
    }
}
});

如果在JavaScript中为空，则在许多文本框中为文本框输入值

2 个答案: