Question

我希望在选择下拉选项后更改<p>代码的值。我有这个工作，但我的问题是我将在一个页面上有很多表格，并觉得我正在重复我的代码。有没有办法用函数做到这一点？为了节省我每次将表单添加到我的页面时编写新的javascript部分？

我的javascript代码：

    $('.orderProduct select#packageOption').change(function(){
        $('#packagePrice').html($(this).val());
    });

    $('.orderProduct2 select#packageOption').change(function(){
        $('#packagePrice2').html($(this).val());
    });

感谢。

Answer 1

为每个data-element-id添加select属性，例如：

<select data-element-id="packagePrice">...</select>
<select data-element-id="packagePrice2">...</select>

然后你只需要这个jQuery代码：

$('select[data-element-id]').change(function(){
    var $this = $(this);
    var id = $this.data('element-id');    
    $('#' + id).html($this.val());
});

如果你想避免额外的属性，你可以使用jQuery的DOM遍历函数，找到你应该更新的p。

选择下拉后更改文本字段（1页上有多个表单）

1 个答案: