显示基于模态下拉列表选择的文本框

Question

我需要根据下拉列表的选择显示文本框

我有以下内容，但它没有做任何事情：

<div id="booking-customer-details-dialog" class="modal fade" tabindex=-1 role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <div class="modal-title h2"><?php _e( 'Edit booking details', 'booking' ) ?></div>
        </div>
        <form ng-hide=loading style="z-index: 1050">
            <div class="modal-body">
                <div class="form-group">
                    <label for="booking-appointment-status"><?php _e( 'Status', 'booking' ) ?></label>
                    <select class="booking-custom-field form-control" id="booking-appointment-status">
                        <option value="<?php echo CustomerAppointment::STATUS_PENDING ?>"><?php echo esc_html( CustomerAppointment::statusToString( CustomerAppointment::STATUS_PENDING ) ) ?></option>
                        <option value="<?php echo CustomerAppointment::STATUS_APPROVED ?>"><?php echo esc_html( CustomerAppointment::statusToString( CustomerAppointment::STATUS_APPROVED ) ) ?></option>
                        <option value="<?php echo CustomerAppointment::STATUS_CANCELLED ?>"><?php echo esc_html( CustomerAppointment::statusToString( CustomerAppointment::STATUS_CANCELLED ) ) ?></option>
                        <option value="<?php echo CustomerAppointment::STATUS_REJECTED ?>"><?php echo esc_html( CustomerAppointment::statusToString( CustomerAppointment::STATUS_REJECTED ) ) ?></option>
                        <option value="<?php echo 'Test' ?>"><?php echo esc_html(Test ) ?></option>
                        <?php if ( Config::waitingListActive() ) : ?>
                            <option value="<?php echo CustomerAppointment::STATUS_WAITLISTED ?>"><?php echo esc_html( CustomerAppointment::statusToString( CustomerAppointment::STATUS_WAITLISTED ) ) ?></option>
                        <?php endif ?>
                    </select>

上面是一个模态。以下是我用于IF语句的Javascript，用于确定是否已选择“已取消”选项

<SCRIPT>

var s = document.getElementById('booking-appointment-status');
var booking-appointment-status = s.options[s.selectedIndex].value;

if (booking-appointment-status == 'cancelled') {
              <div class="checkbox">
              <label><br>
              <input id="booking-delete-notify" type="text"       
    checked="true" style="display:none;"><br>
                    Reason</label>
              </div>

            <div class="form-group" style="display: block;"             id="booking-delete-reason-cover">
                <input class="form-control" type="text" id="booking-      delete-reason" placeholder="Cancellation reason">
            </div>
}
    else if (booking-appointment-status ==      'CustomerAppointment::STATUS_CANCELLED') {
<div class="checkbox">
              <label><br>
              <input id="booking-delete-notify" type="text"       
    checked="true" style="display:none;"><br>
                    Reason</label>
              </div>

            <div class="form-group" style="display: block;"             id="booking-delete-reason-cover">
                <input class="form-control" type="text" id="booking-      delete-reason" placeholder="Cancellation reason">
            </div>
}

</SCRIPT>

请帮助我。我一直在努力解决这个问题 另外它们正在工作，即我看到下拉列表，我可以永久显示文本框

How it should look