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元素，并在更改时添加以下函数。仅当id的{{1}}为div加上d_元素的id属性时才有效。

如果你真的想，你可以在一行中完成：

form

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 个答案: