设置AJAX响应选中的单选按钮

小编典典

设置AJAX响应选中的单选按钮

ajax

我需要在表单中设置一个单选按钮；必须使用来自AJAX响应的值进行检查。

我的AJAX回应是response.drive。“手动”或“自动”可能是其值。

更新： 所以我尝试了一些不同的方法，但是我无法弄清楚。

单程：

if(response.drive=="Manual") {
    .find('[name=drive]')[0].checked = true         
} else {
    .find('[name=drive]')[1].checked = true
}

其他方式：

.find("input:radio[name='drive'][value='"+ response.drive +"']")[0].checked = true.end()

这就是我的ajax成功函数用来填充表单值的方式。

.success(function(response) {
                    // Populate the form fields with the data returned from server
                    response = jQuery.parseJSON(response)
                    $('#editVehicle')

                            .find('[name="vehicle_id"]').val(response.vehicle_id).end()
                            .find('[name="vehicle_name"]').val(response.vehicle).end()
                            .find('[name="seats"]').val(response.seats).end()
                            .find('[name="luggage"]').val(response.luggage).end()
                            .find('[name="doors"]').val(response.doors).end()
                            .find('[name="emission"]').val(response.emission).end()

                            //.find('[name="drive"]').val(response.drive).prop("checked",true).end()
                            //.find('[name="aircon"]').val(response.aircon).prop("checked",true).end()
                            //.find("input:radio[name='drive'][value='"+ response.drive +"']")[0].checked = true.end()

                            //if(response.drive=="Manual"){
                .find('[name=drive]')[0].prop('checked').end()
                            //}else{
                                //.find('[name=drive]')[1].prop('checked')
                            //}

                            .find('[name="rental"]').val(response.price).end();

                    // Show the dialog
---- -
---- 
---

这是HTML单选按钮：

<div class="form-group">
    <label for="">Transmission :</label>
    <div class="col-sm-8">
        <label class="radio-inline">
            <input type="radio" name="drive" id="" value="1"> Manual
        </label>
        <label class="radio-inline">
            <input type="radio" name="drive" id="" value="2"> Auto
        </label>                                                                
    </div>
</div>

如何正确执行此操作？

阅读 392

2020-07-26

共1个答案

小编典典

用

$('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true);

样品：

$(function() {

  response = {

    "vehicle_id": 2,

    "vehicle": "RENAULT TWINGO2798",

    "seats": 43,

    "luggage": 5,

    "doors": 34,

    "emission": 455,

    "drive": "Manual",

    "aircon": "Yes",

    "price": "435.000"

  };



  console.log(response.drive);



  if (response.drive == 'Manual')

    $('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true);

  else

    $('#editVehicle').find(':radio[name=drive][value="2"]').prop('checked', true);



});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="editVehicle">

  <div class="form-group">

    <label for="">Transmission :</label>

    <div class="col-sm-8">

      <label class="radio-inline">

        <input type="radio" name="drive" id="" value="1">Manual

      </label>

      <label class="radio-inline">

        <input type="radio" name="drive" id="" value="2">Auto

      </label>

    </div>

  </div>

</div>

编辑：

更改。

if (response.drive == 'Manual'){
                                .find(':radio[name=drive][value="1"]').prop('checked', true)
                            } else {
                                .find(':radio[name=drive][value="2"]').prop('checked', true)
                            }

至

if (response.drive == 'Manual'){
                                $('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true)
                            } else
                                $('#editVehicle').find(':radio[name=drive][value="2"]').prop('checked', true)
                            }

$('.editVehicle').on('click', function() {
            // Get the record's ID via attribute
            var id = $(this).attr('data-id');
            var vehicleId = 'vehicleId=' + id;

            $.ajax({
                    url: './includes/ajaxprocess_edit_vehicles.php',
                    method: 'post',
                    data: vehicleId
            }).success(function(response) {
                    // Populate the form fields with the data returned from server
                    response = jQuery.parseJSON(response)
                    $('#editVehicle')

                            .find('[name="vehicle_id"]').val(response.vehicle_id).end()
                            .find('[name="vehicle_name"]').val(response.vehicle).end()
                            .find('[name="seats"]').val(response.seats).end()
                            .find('[name="luggage"]').val(response.luggage).end()
                            .find('[name="doors"]').val(response.doors).end()
                            .find('[name="emission"]').val(response.emission).end();

                            if (response.drive == 'Manual'){
                                $('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true)
                            } else {
                                $('#editVehicle').find(':radio[name=drive][value="2"]').prop('checked', true)
                            }



    $('#editVehicle').find('[name="rental"]').val(response.price).end();

                        // Show the dialog
                        bootbox
                                .dialog({
                                        title: 'Edit This Vehicle',
                                        message: $('#editVehicle'),
                                        show: false // We will show it manually later
                                })
                                .on('shown.bs.modal', function() {
                                        $('#editVehicle')
                                                .show()                       // Show the edit form
                                                .formValidation('resetForm'); // Reset form
                                })
                                .on('hide.bs.modal', function(e) {
                                        // Bootbox will remove the modal (including the body which contains the edit form)
                                        // after hiding the modal
                                        // Therefor, we need to backup the form
                                        $('#editVehicle').hide().appendTo('body');
                                })
                                .modal('show');
                });
        });

2020-07-26