我需要在表单中设置一个单选按钮;必须使用来自AJAX响应的值进行检查。
我的AJAX回应是response.drive。“手动”或“自动”可能是其值。
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>
如何正确执行此操作?
用
$('#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'); }); });