2017-05-20 55 views
0

我從早上每次都在這個js的中間,我認爲它會完成我得到另一個塊。我試圖讓從不同元素的值就像他們中的一些<input type="text">和其他人<select>這裏是我的代碼如果內部元素不同,我該如何從每個循環中獲得值我的數組

var eduarray = []; 
    $('.education-groupbox').each(function(index, el) { 
     eduarray[index] = []; 
     var s = $(this).attr('id'); 
     //console.log(); 
     $('#'+s+' .inputs').each(function(key, value) { 

      //console.log($(this).children('.seviyeoptions').val()); 
      if(key == 1) 
      { 

       eduarray[index][key].push($(value).children('.seviyeoptions').val()); 
      } 

     }); 

    }); 

這裏是HTML部分

<div id="education-groupbox" class="education-groupbox"> 
    <div class="inputs col-3"> 
    <label for="email">Seviye</label> 
    <select class="seviyeoptions" name="" id=""> 
     <option value="option one"></option> 
     <option value="option one">Option One</option> 
     <option value="option two">Option Two</option> 
    </select> 
    </div> 
    <div class="inputs col-3"> 
    <label for="email">Okul Adı</label> 
    <input type="text" name="email" /> 
    </div> 
    <div class="inputs col-3"> 
    <label for="email">Bölüm</label> 
    <input type="text" name="email" /> 
    </div> 
    <div class="inputs col-3"> 
    <label for="email">Mezuniyet Yılı</label> 
    <select class="mezuniyetoptions" name="" id=""> 
     <option value="option one"></option> 
     <option value="option one">Option One</option> 
     <option value="option two">Option Two</option> 
    </select> 
    </div> 
</div> 

我想從.inputs類塊中的所有表單元素中獲取所有值。請指教。

+1

「像他們有些是和其他人在這裏是我的代碼」?你能不能正確寫作,因爲理解你的問題並不容易。 –

+0

抱歉的混淆一些單詞被stackoverflow刪除,因爲我猜他們是代碼..let我再次編輯問題 –

+0

用'反引號'包裝這些代碼詞,鍵位於鍵盤的左上角。 – zer00ne

回答

1

給你的div的IDS,你目前選擇$('#'+s+' .inputs').each(function(key, value) { 韓元沒有工作,因爲你的div上沒有id,它的類別是inputs

$('#get').on('click', function() { 
 
     var eduarray = []; 
 
     $('.education-groupbox').each(function (index, el) { 
 
      eduarray[index] = []; 
 
      var s = $(this).attr('id'); 
 
      //console.log(); 
 
      $('#' + s + ' .inputs').each(function (key, value) { 
 
       if ($(this).find('select').length) { 
 
        eduarray[index].push($(this).find('select > option:selected').val()); 
 
       } 
 
       if ($(this).find('input').length) { 
 
        eduarray[index].push($(this).find('input').val()); 
 
       } 
 
      }); 
 

 
      console.log(eduarray); 
 
     }); 
 
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="education-groupbox" class="education-groupbox"> 
 
    <div id="select" class="inputs col-3"> 
 
     <label for="email">Seviye</label> 
 
     <select class="seviyeoptions" name="" id=""> 
 
      <option value="option one"></option> 
 
      <option value="option one">Option One</option> 
 
      <option value="option two">Option Two</option> 
 
     </select> 
 
    </div> 
 
    <div id="input" class="inputs col-3"> 
 
     <label for="email">Okul Adı</label> 
 
     <input type="text" name="email"/> 
 
    </div> 
 
    <div id="input2" class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email"/> 
 
    </div> 
 
    <div id="input3" class="inputs col-3"> 
 
     <label for="email">Mezuniyet Yılı</label> 
 
     <select class="mezuniyetoptions" name="" id=""> 
 
      <option value="option one"></option> 
 
      <option value="option one">Option One</option> 
 
      <option value="option two">Option Two</option> 
 
     </select> 
 
    </div> 
 
</div> 
 
<button id="get">Get values</button>

UPDATE

也可以使用一個對象/締陣列而不是一個標準陣列的,並與每個元素的名稱屬性的值設置對象屬性。

$('#get').on('click', function() { 
 
     var eduarray = {}; 
 
     $('.education-groupbox').each(function (index, el) { 
 
      var s = $(this).attr('id'); 
 
      //console.log(); 
 
      $('#' + s + ' .inputs').each(function (key, value) { 
 
       if ($(this).find('select').length) { 
 
        eduarray[$(this).find('select').attr('name')] = ($(this).find('select > option:selected').val()); 
 
       } 
 
       if ($(this).find('input').length) { 
 
        eduarray[$(this).find('input').attr('name')] = ($(this).find('input').val()); 
 
       } 
 
      }); 
 

 
      console.log(eduarray); 
 
     }); 
 
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="education-groupbox" class="education-groupbox"> 
 
    <div id="select" class="inputs col-3"> 
 
     <label for="email">Seviye</label> 
 
     <select class="seviyeoptions" name="seviyeoptions" id=""> 
 
      <option value="option one"></option> 
 
      <option value="option one">Option One</option> 
 
      <option value="option two">Option Two</option> 
 
     </select> 
 
    </div> 
 
    <div id="input" class="inputs col-3"> 
 
     <label for="email">Okul Adı</label> 
 
     <input type="text" name="email"/> 
 
    </div> 
 
    <div id="input2" class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email2"/> 
 
    </div> 
 
    <div id="input3" class="inputs col-3"> 
 
     <label for="email">Mezuniyet Yılı</label> 
 
     <select class="mezuniyetoptions" name="mezuniyetoptions" id=""> 
 
      <option value="option one"></option> 
 
      <option value="option one">Option One</option> 
 
      <option value="option two">Option Two</option> 
 
     </select> 
 
    </div> 
 
</div> 
 
<button id="get">Get values</button>

+0

code works great!謝謝 –

+0

如何檢查eduarray是否爲空? –

+0

檢查數組長度'.length' http://stackoverflow.com/questions/2672380/how-do-i-check- if-a-javascript-array-value-is-empty-or-null – julekgwa

1

假設你知道可用的選擇框和輸入字段ID在模板

示例代碼

$("button").click(function(){ 
 

 
var map={}; 
 
var arrayList=[]; 
 
map.selectOne=$("#selectOne").val(); 
 
map.selectTwo=$("#selectTwo").val(); 
 
map.email=$("#email").val(); 
 
arrayList.push(map); 
 
console.info(arrayList); 
 
console.log(map); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>selectOne</label> 
 
<select id="selectOne"> 
 
<option value="option one">Option One</option> 
 
<option value="option one">Option Two</option> 
 
<option value="option two">Option Three</option> 
 
</select> 
 
<br> 
 
    
 
    <label>selectTwo</label> 
 
    <select id="selectTwo"> 
 
    <option value="option one">Option One</option> 
 
<option value="option one">Option Two</option> 
 
<option value="option two">Option Three</option> 
 
    </select> 
 
    <br> 
 
    <label for="email">Email</label> <input id="email" type="text" name="email" /> 
 
<br> 
 
<button>submit</button>

相關問題