使用每个(函数)创建jQuery数组以进行选择和输入

时间:2019-04-11 08:08:53

标签: jquery arrays

我要重建此数组:

var testarr=[["Option1","","Text1"],["Option2","Input_1",""]];

通过jquery每个(函数)一个push()进行选择和输入

我尝试过这种方式:

var arraytest = []; 
$('select').each(function(){ arraytest.push($(this).val()); }); 

var arraytest_1 = []; 
$('input').each(function(){ arraytest_1.push($(this).val()); });


<div>
  <select id="idTest" class="select_css" name="selectTest[]">
    <option value="" selected>Option</option>
    <option value="Option1">Option1</option>            
    <option value="Option2">Option2</option>    
  </select>


    <input type="text" class="input_css" data-room="1"  name="input_1[]" />
    <input type="text" class="input_css" data-other="1" name="input_2[]" />
</div>

<div>
  <textarea name="textareaTest[]" placeholder="Test" class="textarea_css" id="textarea1"></textarea>
</div>



<div>
  <select id="idTest" class="select_css" name="selectTest[]">
    <option value="" selected>Option</option>
    <option value="Option1">Option1</option>            
    <option value="Option2">Option2</option>    
  </select>


    <input type="text" class="input_css" name="input_1[]" />
    <input type="text" class="input_css" name="input_2[]" />
</div>

<div>
  <textarea name="textareaTest[]" placeholder="Test" class="textarea_css" id="textarea1"></textarea>
</div>


<div id="arrlist"></div>





 <script>
var testarr=[["Option1","","Text1"],["Option2","Input_1",""]];

    for(var i=0; i<testarr.length; i++) {
    text = '<div>'+testarr[i][0]+'<br>'+testarr[i][1]+'</div><div>'+testarr[i][2]+'</div>';
    $("#arrlist").append(text);
    }
</script>

https://jsfiddle.net/htpmj532/6/

1 个答案:

答案 0 :(得分:0)

首先,要将新元素添加到数组中时,需要向按钮添加事件侦听器。

尝试这样的事情:

<div>
<select id="idTest0" class="select_css" name="selectTest[]">
    <option value="" selected>Option</option>
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
</select>

<input
    id="input01"
    type="text"
    class="input_css"
    data-room="1"
    name="input_1[]"
/>
<input
    id="input02"
    type="text"
    class="input_css"
    data-other="1"
    name="input_2[]"
/>
</div>

<div>
<textarea
    name="textareaTest[]"
    placeholder="Test"
    class="textarea_css"
    id="textarea0"
></textarea>
</div>

<div>
<select id="idTest1" class="select_css" name="selectTest[]">
    <option value="" selected>Option</option>
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
</select>

<input id="input11" type="text" class="input_css" name="input_1[]" />
<input id="input12" type="text" class="input_css" name="input_2[]" />
</div>

<div>
<textarea
    name="textareaTest[]"
    placeholder="Test"
    class="textarea_css"
    id="textarea1"
></textarea>
</div>

<button id="addButton">Add values to array</button>

<div id="arrlist"></div>

<script>
var testarr = [["Option1", "", "Text1"], ["Option2", "Input_1", ""]];

function renderOptions() {
    for (var i = 0; i < testarr.length; i++) {
    text =
        "<div>" +
        testarr[i][0] +
        "<br>" +
        testarr[i][1] +
        "</div><div>" +
        testarr[i][2] +
        "</div>";
    $("#arrlist").html(text);
    }
}

$("#addButton").on("click", function() {
    var firstArray = [
    $("#idTest0").val(),
    $("#input01").val(),
    $("#input02").val(),
    $("#textarea0").val(),
    ];
    var secondArray = [
    $("#idTest1").val(),
    $("#input11").val(),
    $("#input12").val(),
    $("#textarea1").val(),
    ];
    testarr.push(firstArray);
    testarr.push(secondArray);

    renderOptions();
});

renderOptions();
</script>