一旦选择了下拉菜单，请更改文本字段（在1页上有多种表格）

Question

一旦从下拉列表中选择了一个选项，我就希望更改<p>标记的值。 我已经在工作，但是我的问题是我将在一页上有很多表格，感觉就像在重复我的代码。 有没有办法例如通过函数来​​做到这一点？ 为了节省我每次将表单添加到页面时编写新的javascript部分的时间？

我的JavaScript代码：

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

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

谢谢。

Answer 1

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

<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 。