Javascript a<；部门>；使用jQuery

我有两个输入框和两个选择框，希望在提交表格之前实时显示所选和输入数据的摘要。jQuery似乎是一条路要走，但是怎么走呢

<form id="form1" name="form1" method="post" action="">
<select name="Select1" id="Select1">
  <option value="Item 1">Item 1</option>
  <option value="Item 2">Item 2</option>
  <option value="Item 3">Item 3</option>
</select>
<br />
<select name="OtherItem" id="OtherItem">
  <option value="OtherItem 1">OtherItem 1</option>
  <option value="OtherItem 2">OtherItem 2 </option>
  <option value="OtherItem  3">OtherItem 3</option>
</select>
<input type="text" name="textfield1" id="textfield1" />
<input type="text" name="textfield2" id="textfield2" />
</form><div id="FormSummary"></div>

项目1
项目2
项目3


其他项目1
其他项目2
其他项目3

非常感谢

$（'select'）。每个（函数（）{
$('select').each(function() {
    $('#FormSummary').append('<div>' + $(this).val() + '</div>');
});

$('input').each(function() {
    $('#FormSummary').append('<div>' + $(this).val() + '</div>');
});

$（'#FormSummary'）.append（'+$（this.val（）+''）；
});
$（'input'）。每个（函数（）{
$（'#FormSummary'）.append（'+$（this.val（）+''）；
});

.change（）是您正在寻找的方法。它会听取客户的变化

<input> elements, <textarea> boxes and <select> elements

---

我会为您的摘要添加一个HTML标记，以便：

<div id="FormSummary">
     <p>Select 1 is: <span id="summarySelect1"></span></p>
     <p>Select 2 is: <span id="summarySelect2"></span></p>
     <p>Textfield 1 is: <span id="summaryTextField1"></span></p>
     <p>Textfield 2 is: <span id="summaryTextField2"></span></p>
</div>

---

将summary函数绑定到任何要更改的事件。在summary函数中，读取所选的值（

.val（）

），并将其打印到summary元素中（或者更好：按照Evan的建议，打印到其子元素中）。例如：

jQuery(function($) {
    var form = $('#form1').bind('input', function updateSummary() {
        var summary = "";
        form.find('select, input').val(function(v) {
            summary += " "+v;
            return v;
        });
    });
});

---

使用（）上的

on（）

，我能想到的最好方法是：

$（“输入，选择，文本区域”）
.on（'变更'），
职能（e）{
变量输入=$（'input:text'）.map(
函数（）{
返回$（this.val（）；
}).get（）.join（'，'）；
var selects=$（'select option:selected'）。映射(
函数（）{
返回$（this.text（）；
});
var textarea=$（'textarea'）.map(
功能（t）{
返回$（this.val（）；
}).get（）.join（）；
$（“#FormSummary”）
.html（“输入：“+Inputs+”。
选择：“+Selects+”。
文本区域：“+Textareas+”
）；
});

参考资料：

---

是否要显示所选选项的值（属性）或文本（内容）？检查此问题：我认为您可以将该选择器组合起来，即$（'input，select'）。每个（function（）{…}）；

$('#Select1').change(function(){
     $('#summarySelect1').text($(this).val());
});

$('#Select2').change(function(){
     $('#summarySelect2').text($(this).val());
});

$('#textfield1').keypress(function(){
     $('#summaryTextField1').text($(this).val());
});

$('#textfield2').keypress(function(){
     $('#summaryTextField2').text($(this).val());
});

jQuery(function($) {
    var form = $('#form1').bind('input', function updateSummary() {
        var summary = "";
        form.find('select, input').val(function(v) {
            summary += " "+v;
            return v;
        });
    });
});

$('input, select, textarea')
    .on('change',
        function(e){
            var inputs = $('input:text').map(
                function(){
                    return $(this).val();
                        }).get().join(', ');
            var selects = $('select option:selected').map(
                function(){
                    return $(this).text();
                });
            var textareas = $('textarea').map(
                function(t){
                    return $(this).val();
                }).get().join();
            $('#FormSummary')
                .html('<p>Inputs: ' + inputs + '.</p><p>Selects: ' + selects + '.</p><p>Textareas: ' + textareas + '</p>');
        });