使用jQuery或Javascript在选择DropDownList值时填充多个文本框

To populate multiple textboxes when a DropDownList value is selected using jQuery or Javascript

本文关键字：填充 文本 DropDownList jQuery Javascript 选择 使用      更新时间：2023-09-26

我想用jQuery填充多个文本框中所选的下拉列表(选择列表)的值。下面是我的代码

The jQuery Script
<script type="text/javascript">
   
        $("#item").change(function () {
            $("#txtbox").val($(this).val());
            });
                         
</script>
The drop down
 
<select name="item" id="item">
 <option value="1">Orange</option>
 <option value="2">Apple</option>
 <option value="3">Grapes</option>
</select>
Them the html text boxes
<input type="text" name="name" id="txtbox" />
<input type="text" name="name" id="txtbox" />
<input type="text" name="name" id="txtbox" />
and so on....

当我选择下拉菜单时，从代码中只填充第一个文本框。我希望所有的文本框都用所选的DropDown

的值填充

ID必须唯一。更改为使用类，它应该工作:

$("#item").change(function () {
  $(".txtbox").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="item" id="item">
 <option value="1">Orange</option>
 <option value="2">Apple</option>
 <option value="3">Grapes</option>
</select>
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />

每个元素应该有唯一的id。使用class代替

$("#item").change(function () {
   $(".txtbox").val($(this).val());
});  
<select name="item" id="item">
 <option value="1">Orange</option>
 <option value="2">Apple</option>
 <option value="3">Grapes</option>
</select>  
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />

您面临的问题是 id在HTML中必须是唯一的。你可以使用一个普通的类，然后你可以使用类选择器(" .class ")

选择具有给定类的所有元素。

下面是一个例子。

脚本

$("#item").change(function () {
    $(".txtbox").val($(this).val());
});


<input type="text" name="name" class="txtbox" />

您也可以这样做，但建议为控件提供唯一的id 

<script type="text/javascript">
    $("#item").change(function () {
        $("[id=txtbox]").val($(this).val());
        });
</script>

考虑使用数据属性，这样您就不必重复编写代码了。

$('[data-update-val]').change(function(){
  var el = $(this).data('update-val');
  $(el).val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-update-val=".txtbox">
 <option value="1">Orange</option>
 <option value="2">Apple</option>
 <option value="3">Grapes</option>
</select>
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />

您可以使这段代码更加灵活。例如，可以通过按空格分隔data属性的内容并循环它们来更新多个类。

同时，考虑在开头使用一个空选项，或者将这段代码放在一个函数中，该函数在加载和发生更改时运行。

相关文章：