Select单选按钮根据返回值
Select radio button according to returned value
当我在没有完整日历的情况下编辑事件时,我在模式中创建了这两个单选按钮。
$('#calendar').fullCalendar({
defaultView: 'month',
header: {
language: 'PT',
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek',
},
defaultDate: dia,
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
events: [
<?php foreach($events as $event): ?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['nome']; ?>',
radio_one: '<?php echo ($event['contatou']=="Sim") ? "checked" : "" ; ?>',
radio_two: '<?php echo ($event['contatou']=="Não") ? "checked" : "" ; ?>',
},
<?php endforeach; ?>
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="./updatevisitaLar1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">ALTERAR VISITA</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="titlee" class="col-sm-4 control-label">NOME UTENTE</label>
<div class="col-sm-8">
<select name="titlee" class="form-control" id="titlee">
<option value=""></option>
<?php
$sql = "SELECT * FROM raddb.Utente WHERE ativo = '1' ORDER BY nome ASC";
$qr = mysqli_query($conn, $sql);
while($ln = mysqli_fetch_assoc($qr)){
echo '<option value="'.$ln['codigo'].'">'.$ln['nome'].'</option>';
}
?>
</select>
</div>
</div>
<div id="isolamento">
<div class="form-group">
<label for="switch_one" class="col-sm-4 control-label">CONTATOU VISITANTE</label>
<div class="switch-field">
<input type="radio" id="radio_one" name="switch_one" value="Sim" />
<label for="radio_one">SIM</label>
<input type="radio" id="radio_two" name="switch_one" value="Não" />
<label for="radio_two">NÃO</label>
</div>
</div>
<div class="form-group">
<label for="switch_two" class="col-sm-4 control-label">ALTERAÇÂO DA VISITA</label>
<div class="switch-field">
<input type="radio" id="radio_three" name="switch_two" value="Alt" />
<label for="radio_three">ALTERAÇÂO DE DATA</label>
<input type="radio" id="radio_four" name="switch_two" value="Canc" />
<label for="radio_four">CANCELOU VISITA</label>
</div>
</div>
</div>
<ul class="flex-outer">
<div class="form-check">
<label class="toggle">
<input type="checkbox" name="delete"> <span class="label-text text-danger"> ELIMINAR TAREFA</span>
</label>
</div>
</ul>
<input type="hidden" name="id" class="form-control" id="id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
<button type="button" style="float: right" onclick="inserir_alter()" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
当我 return 数据库选项按钮的值时,我希望从数据库中选择 returned 的值。为此,我按照上面所说的方式进行操作:
radio_one: '<?php echo ($event['contatou']=="Sim") ? "checked" : "" ; ?>',
radio_two: '<?php echo ($event['contatou']=="Não") ? "checked" : "" ; ?>',
但它不起作用。
我打算让用户在模式中查询事件时,根据数据库 returned 的值
显示所选的收音机
我这样打开模式:
eventRender: function(event, element) {
element.bind('dblclick', function() {
console.log(event.cancelou);
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #titlee').val(event.titlee);
$('#ModalEdit #response').val(event.response);
$('#ModalEdit #contacte').val(event.contacte);
$('#ModalEdit #title1e').val(event.title1);
$('#ModalEdit #contact1e').val(event.contact1);
$('#ModalEdit #start1').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalEdit #end1').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalEdit #DataRegisto').val(event.DataRegisto);
$('#ModalEdit #Colaborador').val(event.Colaborador);
$('#ModalEdit').modal('show');
});
您没有使用在 fullCalendar 事件中设置的值来实际执行任何操作。拥有两个单独的 radio_one 和 radio_two 值也没有多大意义。
这里有一个应该有效的方法:
events: [
<?php foreach($events as $event): ?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['nome']; ?>',
switch_one: '<?php echo $event['contatou']; ?>'
},
<?php endforeach; ?>
]
和
$("input[name='switch_one'][value='" + event.switch_one + ']").prop("checked",true);
这会使用您字段中的实际值在单选按钮组中找到具有匹配值的单选按钮,并将其“checked”属性 设置为 true,使其被选中。该概念取自 this answer.
中的示例
当我在没有完整日历的情况下编辑事件时,我在模式中创建了这两个单选按钮。
$('#calendar').fullCalendar({
defaultView: 'month',
header: {
language: 'PT',
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek',
},
defaultDate: dia,
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
events: [
<?php foreach($events as $event): ?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['nome']; ?>',
radio_one: '<?php echo ($event['contatou']=="Sim") ? "checked" : "" ; ?>',
radio_two: '<?php echo ($event['contatou']=="Não") ? "checked" : "" ; ?>',
},
<?php endforeach; ?>
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="./updatevisitaLar1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">ALTERAR VISITA</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="titlee" class="col-sm-4 control-label">NOME UTENTE</label>
<div class="col-sm-8">
<select name="titlee" class="form-control" id="titlee">
<option value=""></option>
<?php
$sql = "SELECT * FROM raddb.Utente WHERE ativo = '1' ORDER BY nome ASC";
$qr = mysqli_query($conn, $sql);
while($ln = mysqli_fetch_assoc($qr)){
echo '<option value="'.$ln['codigo'].'">'.$ln['nome'].'</option>';
}
?>
</select>
</div>
</div>
<div id="isolamento">
<div class="form-group">
<label for="switch_one" class="col-sm-4 control-label">CONTATOU VISITANTE</label>
<div class="switch-field">
<input type="radio" id="radio_one" name="switch_one" value="Sim" />
<label for="radio_one">SIM</label>
<input type="radio" id="radio_two" name="switch_one" value="Não" />
<label for="radio_two">NÃO</label>
</div>
</div>
<div class="form-group">
<label for="switch_two" class="col-sm-4 control-label">ALTERAÇÂO DA VISITA</label>
<div class="switch-field">
<input type="radio" id="radio_three" name="switch_two" value="Alt" />
<label for="radio_three">ALTERAÇÂO DE DATA</label>
<input type="radio" id="radio_four" name="switch_two" value="Canc" />
<label for="radio_four">CANCELOU VISITA</label>
</div>
</div>
</div>
<ul class="flex-outer">
<div class="form-check">
<label class="toggle">
<input type="checkbox" name="delete"> <span class="label-text text-danger"> ELIMINAR TAREFA</span>
</label>
</div>
</ul>
<input type="hidden" name="id" class="form-control" id="id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
<button type="button" style="float: right" onclick="inserir_alter()" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
当我 return 数据库选项按钮的值时,我希望从数据库中选择 returned 的值。为此,我按照上面所说的方式进行操作:
radio_one: '<?php echo ($event['contatou']=="Sim") ? "checked" : "" ; ?>',
radio_two: '<?php echo ($event['contatou']=="Não") ? "checked" : "" ; ?>',
但它不起作用。 我打算让用户在模式中查询事件时,根据数据库 returned 的值
显示所选的收音机我这样打开模式:
eventRender: function(event, element) {
element.bind('dblclick', function() {
console.log(event.cancelou);
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #titlee').val(event.titlee);
$('#ModalEdit #response').val(event.response);
$('#ModalEdit #contacte').val(event.contacte);
$('#ModalEdit #title1e').val(event.title1);
$('#ModalEdit #contact1e').val(event.contact1);
$('#ModalEdit #start1').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalEdit #end1').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalEdit #DataRegisto').val(event.DataRegisto);
$('#ModalEdit #Colaborador').val(event.Colaborador);
$('#ModalEdit').modal('show');
});
您没有使用在 fullCalendar 事件中设置的值来实际执行任何操作。拥有两个单独的 radio_one 和 radio_two 值也没有多大意义。
这里有一个应该有效的方法:
events: [
<?php foreach($events as $event): ?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['nome']; ?>',
switch_one: '<?php echo $event['contatou']; ?>'
},
<?php endforeach; ?>
]
和
$("input[name='switch_one'][value='" + event.switch_one + ']").prop("checked",true);
这会使用您字段中的实际值在单选按钮组中找到具有匹配值的单选按钮,并将其“checked”属性 设置为 true,使其被选中。该概念取自 this answer.
中的示例