如果内部元素不同,我如何从每个循环获得我的数组的值

时间:2022-01-16 19:14:41

I am in the middle of this js from morning everytime i think it is going to be completed i get another block. What i am trying to get is the values from the different elements like some of them are <input type="text"> and others were <select> here is my code

我每天早上都在这个js的中间,我认为它将要完成我得到另一个块。我想要得到的是来自不同元素的值,比如其中一些是而其他元素是

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

        });

    });

and here is the html part

这是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>

I want to get all the values from the all form elements which are in .inputs class block. please advice.

我想从.inputs类块中的所有表单元素中获取所有值。请指教。

2 个解决方案

#1


1  

Give your div's ids, your current selector $('#'+s+' .inputs').each(function(key, value) { won't work as there are no id on your div which have class inputs.

给你的div ids,你当前的选择器$('#'+ s +'。输出')。每个(函数(键,值){将不起作用,因为你的div上没有id有类输入的id。

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

You can also use an object/associative array instead of a standard array, and set the object properties with the value of the name attribute of each element.

您还可以使用对象/关联数组而不是标准数组,并使用每个元素的name属性值设置对象属性。

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

#2


1  

Assuming that you know id of available select boxes and input fields in the template

假设您知道模板中可用选择框和输入字段的ID

Sample Code

$("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>

#1


1  

Give your div's ids, your current selector $('#'+s+' .inputs').each(function(key, value) { won't work as there are no id on your div which have class inputs.

给你的div ids,你当前的选择器$('#'+ s +'。输出')。每个(函数(键,值){将不起作用,因为你的div上没有id有类输入的id。

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

You can also use an object/associative array instead of a standard array, and set the object properties with the value of the name attribute of each element.

您还可以使用对象/关联数组而不是标准数组,并使用每个元素的name属性值设置对象属性。

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

#2


1  

Assuming that you know id of available select boxes and input fields in the template

假设您知道模板中可用选择框和输入字段的ID

Sample Code

$("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>