时间戳

首页 > 解决方案 > 通过 Jquery 动态创建 JSON 对象

jquery - 通过 Jquery 动态创建 JSON 对象

问题描述

我想要这种序列化表单中的数据我正在查看许多示例但无法正常工作。我的代码在这里-

<select class="awe-select" name="rooms" id="rooms">                                         
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
 </select>
<button class="awe-btn-default submit" type="submit">BOOK </button>

   <script type="text/javascript">
$(document).ready(function() {
    $("#rooms").change(function() {
        var selVal = $(this).val();
        $("#textboxDiv").html('');
        if(selVal > 0) {
            for(var i = 1; i<= selVal; i++) {
                $("#textboxDiv").append("<div class='check_availability_group'><span class='label-group'>ROOM </span><div class='check_availability-field_group'><div class='check_availability-field'><label>Adult</label><select name='adult' id='adult' class='form-control activeInput' required><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></div><div class='check_availability-field'><label>Children</label><select class='form-control activeInput' id='children' name='children' required><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option  value='4'>4</option><option value='5'>5</option></select></div></div></div>");
            }
        }
    });
});
</script>

json代码在这里-

<script>
$(document).ready(function() {
    $(".submit").click(function() {
    var array = [];
$("select[class=activeInput]").each(function() {
    array.push({
        adult: $(this).val(),
        children: $(this).val()
    });
});
});
});
// then to get the JSON string
var jsonString = JSON.stringify(array);
console.log(jsonString)
}
</script>

我想要成人和儿童数据，根据房间的这种格式，比如 -

 "rooms": [
           {                       
          "children": 0,
           "adults": 1
           },
           {
            "children": 1,
             "adults": 2,                       
            }
         ]

标签： jqueryjsonlaravel

解决方案

请找到以下链接： https ://jsfiddle.net/ulric_469/5986mpxd/31/

<select class="awe-select" name="rooms" id="rooms">                                         
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
 </select>
 <div class= "temp" id ="textboxDiv">

 </div>
 <button class="awe-btn-default submit" type="submit">BOOK </button>

JS：

$(document).ready(function() {
    $("#rooms").change(function() {
        var selVal = $(this).val();
        $("#textboxDiv").html("");
        if(selVal > 0) {
            for(var i = 1; i<= selVal; i++) {
                $("#textboxDiv").append("<div class='check_availability_group'><span class='label-group'>ROOM </span><div class='check_availability-field_group'><div class='check_availability-field'><label>Adult</label><select name='adult' id='adult' class='form-control activeInput' required><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></div><div class='check_availability-field'><label>Children</label><select class='form-control activeInput' id='children' name='children' required><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option  value='4'>4</option><option value='5'>5</option></select></div></div></div>");
            }
        }
    });

    $(".submit").click(function() {
    var array = [];     
$(".check_availability-field_group").each(function() {
    array.push({
        adult: +$(this).find("select[name= 'adult']").val(),
        children: +$(this).find("select[name= 'children']").val()
    });
});
var jsonString = JSON.stringify(array);
    console.log(jsonString)
});

});

推荐阅读