Question

我想使用jQuery使用选定的DropDownList（Select List）的值填充多个文本框。这是我的代码

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时的代码中，只填充了第一个文本框。我希望所有文本框都填充所选DropDown的值

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

每个元素都应该有唯一的[JsonProperty(PropertyName = "u")] public string UniqueId {get; set;}。使用id代替

class

Answer 3

您遇到问题，因为HTML中的 ID必须是唯一的。您可以使用公共类，然后使用Class Selector (“.class”)

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

这是一个例子。

脚本

generatesDecimalNumbers

HTML 的

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

Answer 4

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

<script type="text/javascript">

    $("#item").change(function () {
        $("[id=txtbox]").val($(this).val());
        });

</script>

Answer 5

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

＆＃13;

$('[data-update-val]').change(function(){
  var el = $(this).data('update-val');
  $(el).val(this.value);
});

＆＃13;

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

＆＃13;

您可以使此代码更加灵活。例如，您可以通过按空格分割数据属性的内容并循环遍历它们来更新多个类。

此外，请考虑在开头使用空选项，或将此代码放在加载运行的函数中以及进行更改时。

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

5 个答案: