jquery循環通過字段和下拉菜單，並顯示入口值到div

我試圖找出如何使用單個循環獲取表單域值和選定的下拉菜單選項，並將它們顯示在同一頁面上的各個div中。jquery循環通過字段和下拉菜單，並顯示入口值到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>

來源

2012-03-09 designer 101

在你的問題中有一個汽車對象。下面的答案可以幫助你，但我不確定CAR對象。 – 2012-03-09 12:54:11

你的意思是：

$('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/

來源

2012-03-09 12:48:14 binarious

非常感謝soo。這也適用於複選框和單選按鈕嗎？ – 2012-03-09 13:05:34

我的例子不適用於單選按鈕或複選框。有點複雜然後 – binarious 2012-03-09 13:08:07

這就好，但是，我唯一的問題是...如果一個人複製文本和粘貼到一個領域......它不會顯示到divs任何想法如何我可以解決它？ – 2012-03-09 13:12:51

嘗試是這樣的：

$(":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()); 
});

來源

2012-03-09 12:47:45 ManseUK

謝謝您的澄清。然而，「二元」方法較短。 – 2012-03-09 13:07:52

我需要使它與textarea字段一起工作......這可能嗎？ – 2012-03-09 15:22:17

@ designer101看看[.focusout（）]（http://api.jquery.com/focusout/）或[.keypress（）]（http://api.jquery.com/keypress/）..例如 - > http://jsfiddle.net/kBGZ6/2/ – ManseUK 2012-03-09 15:35:12

jquery循環通過字段和下拉菜單，並顯示入口值到div

回答

相關問題