我最初有一个文本框,当我更改下拉值时,它被另一个下拉列表替换。 现在,当我再次更改回原始值时,下拉列表仍然保持不变,而不是仅在特定条件下可见。
这是我的代码
$('#service_id').on('change', function () {
var service_id = $('#service_id option:selected').text();
if (service_id=='To Airport')
{
alert(service_id);
$('#dropoff_at').hide();
$('#dropoff_at_airport').show();
}
else if(service_id=='From Airport')
{
alert(service_id);
$('#pickup_at').hide();
$('#pickup_at_airport').show();
}
else
{
alert(service_id);
}
});
});
其中service_id是从哪里更改值的下拉列表。
HTML代码
<div class="col-sm-6 pull-right quote-form">
<div class="full-width-container">
<label>Select Service</label>
<select name="service_id" id="service_id">
<?php if(!empty($services)){
foreach ($services as $key => $value) { ?>
<option value="<?php echo $value->id ?>"><?php echo $value->service_name ?></option>
<?php }} ?>
</select>
</div>
<div class="full-width-container">
<label>Passengers</label>
<select name="no_of_passengers">
<?php for ($i=1; $i <=100 ; $i++) { ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php } ?>
</select>
</div>
<div class="full-width-container">
<label>Pickup Time</label>
<div class="small-input">
<input type="text" class="datepicker" name="pickup_date">
</div>
<div class="small-select">
<input type="text" class="timepicker" name="pickup_time">
</div>
</div>
<div class="full-width-container">
<label>Pickup At</label>
<input type="text" id="pickup_at" name="pickup_at">
<select name="pickup_at" id="pickup_at_airport" style="display:none">
<?php if(!empty($airport)){
foreach ($airport as $key => $value) { ?>
<option value="<?php echo $value->id ?>"><?php echo $value->name ?></option>
<?php }} ?>
</select>
</div>
<div class="full-width-container">
<label>Dropoff At</label>
<input type="text" id="dropoff_at" name="dropoff_at">
<select name="dropoff_at" id="dropoff_at_airport" style="display:none">
<?php if(!empty($airport)){
foreach ($airport as $key => $value) { ?>
<option value="<?php echo $value->id ?>"><?php echo $value->name ?></option>
<?php }} ?>
</select>
</div>
答案 0 :(得分:3)
我认为如果你在选择其他选项时隐藏以前显示的内容就可以了。
if (service_id=='To Airport')
{
alert(service_id);
$('#dropoff_at').hide();
$('#dropoff_at_airport').show();
$('#pickup_at').show();
$('#pickup_at_airport').hide();
}
else if(service_id=='From Airport')
{
alert(service_id);
$('#pickup_at').hide();
$('#pickup_at_airport').show();
$('#dropoff_at').show();
$('#dropoff_at_airport').hide();
}
答案 1 :(得分:1)
在显示下拉列表之前,您可以使用input file
为0。
353458080153530,0
353458080153540,0
它重置您的下拉菜单,之前选定的值在焦点上松动。
答案 2 :(得分:1)
试试这个
$('#service_id').change(function () {
var service_id = $(this).val();
if (service_id=='To Airport')
{
alert(service_id);
$('#dropoff_at').hide();
$('#dropoff_at_airport').show();
}
else if(service_id=='From Airport')
{
alert(service_id);
$('#pickup_at').hide();
$('#pickup_at_airport').show();
}
else
{
alert(service_id);
}
});