javascript - 在jquery中切换隐藏和显示

Question

现在，当我更改下拉列表值时，我最初有一个文本框，它会被另一个下拉列表替换。现在，当我再次更改回原始值时，下拉列表仍然保持不变，而不是仅在特定条件下可见。

这是我的代码

$('#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>

Answer 1

我认为如果您在选择其他选项时隐藏以前显示的内容就可以了。

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();
}