jQuery遍历字段和下拉菜单，并将条目值显示到div中

Question

我试图弄清楚如何使用单个循环获取表单字段值和所选的下拉菜单选项，并将它们显示在同一页面上的各个div中。

目前，我只能使用重复代码而不是使用单个循环来实现这一目标。 表单最终将非常长，包含许多字段和下拉菜单（选择选项），因此循环将是一个更好的选择。

我将不胜感激任何帮助。 提前致谢。

我的密码

    <html>
        <head>
          <script src="jquery.js"></script>

    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){

    $("#name").keypress(event) {
        var stt = $(this).val();
        $("#d_name").text(stt);
    });

    $("#email").keypress(event) {
        var stt = $(this).val();
        $("#d_email").text(stt);
    });

        $("#telephone").keypress(event) {
        var stt = $(this).val();
        $("#d_telephone").text(stt);
    });

    $("#car").change(function(event) {
        var stt = $(this).val();
        $("#d_type").text(stt);
    });

  $("#type").change(function(event) {
        var stt = $(this).val();
        $("#d_type").text(stt);
    });

    });//]]> 
    </script>  

        </head>
        <body>

    Name:      
    <input type="text" value="" id="name"/>
    Email:
    <input type="text" value="" id="email"/>
    Telephone:
    <input type="text" value="" id="telephone"/>
    Car:
    <select id="car" >
      <option value="volvo">Volvo</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select> 
    Type:
    <select id="type">
      <option value="automatic">automatic</option>
      <option value="manual">manual</option>
    </select> 

    Your Data
    Name: <div id="d_name" ></div>
    Email: <div id="d_email" ></div>
    Telephone: <div id="d_telephone" ></div>
    Car: <div id="d_car" ></div>
    Type: <div id="d_type" ></div>

        </body>
        </html>

Answer 1

尝试这样的事情：

$(":input,:select").change(function(event) {
    var val = $(this).val(); // get the val
    var id = $(this).attr('id');  // get the id
    $("#d_" + id).text(val);  // use #d_ plus id to set the test to val
});

第一行选择所有input和select元素，并在更改时添加以下功能。 仅当div的id为d_加上form元素的id属性时，此方法才有效。

如果您真的想要，可以单行执行：

$(":input,:select").change(function(event) {
    $("#d_" + $(this).attr('id')).text($(this).val());
});

Answer 2

你的意思是：

$('input, select').change(function() {
    $('#d_' + this.id).text($(this).val());
});

进行编辑：

var updateText = function() {
    $('#d_' + this.id).text($(this).val());
}

$('input').keypress(updateText);
$('select').change(updateText);

示例： http ： //jsfiddle.net/kBGZ6/

jQuery遍历字段和下拉菜单，并将条目值显示到div中

问题描述

2 个解决方案

解决方案1
0 2012-03-09 12:47:45

解决方案2
0 已采纳 2012-03-09 12:48:14

jQuery遍历字段和下拉菜单，并将条目值显示到div中

问题描述

2 个解决方案

解决方案1 0 2012-03-09 12:47:45

解决方案2 0 已采纳 2012-03-09 12:48:14

解决方案1
0 2012-03-09 12:47:45

解决方案2
0 已采纳 2012-03-09 12:48:14