Estoy intentando seleccionar un valor por defecto, este es el código
if($room_stock > 0){ ?>
<div class="input-group input-group-sm mt10">
<div class="input-group-addon"><i class="fas fa-fw fa-tags"></i> <?php echo $pms_texts['NUM_ROOMS']; ?></div>
<select name="num_rooms[<?php echo $id_room; ?>]" class="form-control sendAjaxForm selectpicker" data-target="#room-options-<?php echo $id_room; ?>" data-extratarget="#booking-amount" data-action="<?php echo pms_getFromTemplate('common/change_num_rooms.php'); ?>?room=<?php echo $id_room; ?>">
<?php
for($i = 0; $i <= $room_stock; $i++){ ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php
} ?>
</select>
</div>
<?php
Esto funciona perfecto, me arroja un resultado como el siguiente
Como ven, si yo selecciono el valor 1, se me habilita estas opciones.
Lo que quiero lograr, es que para que el cliente no tenga que seleccionar, quiero que el valor 1 sea el que este por defecto. En vez de 0 y pueda habilitar la confirmación de huéspedes.
He intentado lo siguiente.
if($room_stock > 0){ ?>
<div class="input-group input-group-sm mt10">
<div class="input-group-addon"><i class="fas fa-fw fa-tags"></i> <?php echo $pms_texts['NUM_ROOMS']; ?></div>
<select name="num_rooms[<?php echo $id_room; ?>]" class="form-control sendAjaxForm selectpicker" data-target="#room-options-<?php echo $id_room; ?>" data-extratarget="#booking-amount" data-action="<?php echo pms_getFromTemplate('common/change_num_rooms.php'); ?>?room=<?php echo $id_room; ?>">
<?php
$i =1;
?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
</select>
</div>
<?php
}
Pero lo que consigo es que el valor aparezca seleccionado pero no se activa la confirmación del huésped.
Codigo javascript
<script>
$(function(){
$('select[name^="num_rooms"]').on('change', function(){
var obj = $(this);
setTimeout(function(){
if(obj.val() > 0){
var attr = obj.attr('name').match(/\[(\d+)\]/);
var target = $('select[name^="num_adults['+attr[1]+']');
target.val('1').trigger('change');
}
}, 500)
}).change();
$('.room-options').on('change', '[name^="num_children"]', function(){
var attr = $(this).attr('name').match(/\[(\d+)\]\[(\d+)\]/);
var target = $('#children-options-'+attr[1]+'-'+attr[2]);
var num = $(this).val();
var html = '<?php echo $pms_texts['CHILDREN_AGE']; ?>:<br>';
for(var i = 0; i < num; i++){
html +=
'<div class="input-group input-group-sm">'+
'<div class="input-group-addon"><?php echo ucfirst($pms_texts['CHILD']); ?> '+(i+1)+'</div>'+
'<select name="child_age['+attr[1]+']['+attr[2]+']['+i+']" class="form-control sendAjaxForm selectpicker" data-extratarget="#booking-amount" data-action="<?php echo pms_getFromTemplate('common/change_num_people.php'); ?>?index='+attr[2]+'&id_room='+attr[1]+'" data-target="room-result-'+attr[1]+'-'+attr[2]+'" style="display: none;">'+
'<option value="">-</option>';
for(var j = 0; j <= 12; j++) html += '<option value="'+j+'">'+j+'</option>';
html +=
'</select>'+
'</div>'+
'</div>';
}
target.html(html);
$('.selectpicker').selectpicker('refresh');
});
<?php
if(isset($_POST['room_id']) && is_numeric($_POST['room_id'])){ ?>
setTimeout(function(){
$('select[name="num_rooms[<?php echo $_POST['room_id']; ?>]"').val('1').trigger('change');
}, 2000);
<?php
} ?>
});
</script>
¿Alguna idea de como puedo hacerlo?