jQuery循環輸入和選項

-1

我想循環表單域並獲取值。我期待的是"key=primary_account_id&value=123&key=primary_account_first_name&value=rose&key=primary_account_last_name&value=kent"，我從下面的代碼得到的結果是"key=primary_account_id&value=123"三次。請讓我知道我錯過了什麼。謝謝。jQuery循環輸入和選項

<div class="search-field-form"> 
    <div class="custom-dd"> 
     <select class="searchField" name="search-field"> 
     <option value="primary_account_id" data-type="text">ID</option> 
     </select> 
    </div> 
    <div class="answer search-text hide"> 
     <input type="text" name="search-value" value="123"> 
    </div> 
    </div> 
    <div class="search-field-form"> 
    <div class="custom-dd"> 
     <select class="searchField" name="search-field"> 
     <option value="primary_account_first_name" data-type="text">Primary First Name</option> 
     </select> 
    </div> 
    <div class="answer search-text hide"> 
     <input type="text" name="search-value" value="rose"> 
    </div> 
    </div> 
    <div class="search-field-form"> 
    <div class="custom-dd"> 
     <select class="searchField" name="search-field"> 
     <option value="primary_account_last_name" data-type="text">Last Name</option> 
     </select> 
    </div> 
    <div class="answer search-text hide"> 
     <input type="text" name="search-value" value="kent"> 
    </div> 
    </div> 
<script> 
$('.search-field-form').each(function(){ 
console.log("key=" + $('.searchField').val() + "&value=" + $('.searchField').closest('.search-field-form').find('.search-text').find('input[name="search-value"]').val()); 
</script>

來源

2017-08-17 Swapnil

使用表單和'serialize'。或用'serializeArray'。非常簡潔：https：//api.jquery.com/serialize/ – quirimmo

'$（'。searchField'）'會爲您提供具有該類名稱的第一個元素。你需要爲每個'search-field-form'找到'searchField';在這種情況下，$（this）.find（'。searchField'）'會給你你想要的。 –

@LwinHtooKo謝謝。這是獲得理想結果的有效方式嗎？ – Swapnil

變化$('.searchField')到$(this).find('.searchField')

來源

2017-08-17 17:31:20 hairmot

如果你有一個表格，下面做 -

HTML

<form id="search-form"> 
    <div class="search-field-form"> 
     <div class="custom-dd"> 
      <select class="searchField" name="search-field"> 
       <option value="primary_account_id" data-type="text">ID</option> 
      </select> 
     </div> 
     <div class="answer search-text hide"> 
      <input type="text" name="search-value" value="123"> 
     </div> 
    </div> 
    <div class="search-field-form"> 
     <div class="custom-dd"> 
      <select class="searchField" name="search-field"> 
       <option value="primary_account_first_name" data-type="text">Primary First Name</option> 
      </select> 
     </div> 
     <div class="answer search-text hide"> 
      <input type="text" name="search-value" value="rose"> 
     </div> 
    </div> 
    <div class="search-field-form"> 
     <div class="custom-dd"> 
      <select class="searchField" name="search-field"> 
       <option value="primary_account_last_name" data-type="text">Last Name</option> 
      </select> 
     </div> 
      <div class="answer search-text hide"> 
       <input type="text" name="search-value" value="kent"> 
      </div> 
     </div> 
    <button type="button" id="submit-btn">Submit</button> 
</form>

<script> 
$(function() { 
    $('#submit-btn').click(function() { 
     data = $('#search-form').serialize(); 
     data = data.replace(/search-field/g, 'key'); 
     data = data.replace(/search-value/g, 'value'); 
     console.log(data); 
    }); 
}); 
</script>

如果您沒有表格，請按照Hairmot的回答。

來源

2017-08-17 18:22:30

jQuery循環輸入和選項

回答

相關問題