javascript - 根据选择选项制作动态 JSON

Question

我有这个模态视图:

<div class="modal fade" id ="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Delta Rom insert missed entries</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Event:</label>
                        <div class="col-sm-10">
                            <select id="eventData" name="type" data-placeholder="Select"
                                    class="form-control chosen-select">
                                <option value="Harvest">
                                    Harvest Product Machine
                                </option>
                                <option value="Tara">
                                    Tara Machine
                                </option>
                            </select>
                        </div>
                    </div>
                    <div id ="producttab" class="form-group">
                        <label class="col-sm-2 control-label">Product:</label>
                        <div class="col-sm-10">
                            <select name="harvest" id ="harvestData" data-placeholder="Select"
                                    class="form-control chosen-select">
                                <?php
                                foreach ($this->datamodal['products'] as $value) {
                                    echo '<option value = "' . $value->name . '">' . $value->name . '</option>';
                                }
                                ?>
                            </select>    
                        </div>
                    </div>
                    <div id ="tabmachines" class="form-group">
                        <label class="col-sm-2 control-label">Machine:</label>
                        <div class="col-sm-10">
                            <select name="machine" id ="machineData" data-placeholder="Select"
                                    class="form-control chosen-select">
                                <?php
                                foreach ($this->datamodal['machines'] as $value) {
                                    echo '<option value = "' . $value->name . '">' . $value->name . '</option>';
                                }
                                ?>    
                            </select>  
                        </div>
                    </div>
                    <div id="impuritytab" class="form-group">
                        <label class="col-sm-2 control-label">Impurity:</label> 
                        <div class="col-sm-10">
                            <input name="impurities" type="text" class="form-control" id="inputimpuritiesData" 
                                   placeholder="Impurities">    
                        </div>
                    </div>
                    <div id ="humiditytab" class="form-group">
                        <label class="col-sm-2 control-label">Humidity:</label>
                        <div class="col-sm-10">
                            <input name="humidity" type="text" class="form-control" id="humidityAData" 
                                   placeholder="Humidity">
                        </div>    
                    </div>  
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="saveModal" type="button" value="submit" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

我得到了 2 种类型的具有 Harvest 或 Tara 值的事件，根据所选的事件，我显示了一些特定的 div，如下所示:

$('#eventData').change(function() {
    opt = $(this).val();
    if (opt=="Tara") {
    $("#producttab").hide();
    $("#impuritytab").hide();
    $("#humiditytab").hide();
    }else if (opt == "Harvest") {
    $("#producttab").show();
    $("#impuritytab").show();
    $("#humiditytab").show();
    }
});

我有一个 ajax 可以提交该表单:

function onAddMissedEntryInfoClicked(entryId) {
var currentEntryId = entryId;
$('#myModal').modal('show');  //this load modal view
$("#saveModal").unbind( "click");
$('#saveModal').bind('click', function(){
    var event = $('#eventData').val();
    var product = $('#harvestData').val();
    var machine = $('#machineData').val();
    var impurities = $("#inputimpuritiesData").val();
    var humidity = $("#humidityData").val();
    var dataJson = {
        "eventid":currentEntryId,
        "event": event,
        "product": product,
        "machine": machine,
        "impurities": impurities,
        "humidity":humidity

    };
    $.ajax({
        type: 'POST',
        url: "Monitor/thisUpdate",
        data: dataJson,
        success: function (data) {
            console.log(data);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
         $('#myModal').modal('hide');

 });

 }

我的问题是，当我使用 Machine 选项时，我只会看到 tabmachines id 字段(这很好)，但是当我提交时，我将发送所有表单值，包括我隐藏在 jQuery 中的字段。我只想发送选择选项上的表单，在我的例子中只发送机器值。我怎样才能以动态的方式制作我的ajax数据？谢谢你!

Answer 1

您可以在 onAddMissedEntryInfoClicked 中添加 if 子句，并根据事件数据创建不同的 json 对象。

if (event==="Harvest") {
   var dataJson = {
    "eventid":currentEntryId,
    "event": event,
    "machine": machine
   };
}
else if (event==="Tara") {
  var dataJson = {
    "eventid":currentEntryId,
    "event": event,
    "product": product
    "impurities": impurities,
    "humidity":humidity
   };
}