jQuery：如何用新元素替换元素并仅显示新元素？

Question

In the following code I am showing order_status in admin panel of opencart when admin edits an order. The order status is showing perfectly fine.

            <?php if ($info_data['order_status']) { ?>
                <tr>
                <td><?php echo $info_data['text_order_status'];?</td>
                <td id="order-status"><?php echo $info_data['order_status']; ?></td>
                </tr>
            <?php } ?>

But when admin update the order_status by selecting from a drop down list it shows the updated order_status with the old order_status. I need to only show the updated order_status , How can I replace the old status with the updated order_status?

if (json['success']) {
                    $('#history').load('index.php?route=sale/order/history&token=<?php echo $token; ?>&order_id=<?php echo $order_id; ?>&shipping_code=<?php echo $shipping_code; ?>');

                    $('#history').before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                    $('textarea[name=\'comment\']').val('');

                    $('#order_tracking_number').val('');

                    $('#order-status').html($('select[name=\'order_status_id\'] option:selected').text());
                }

I guess this line should do the replacement , but it is not working properly , what should I change? Please Help !

$('#order-status').html($('select[name=\'order_status_id\'] option:selected').text());

UPDATE : Code for select box

               <div class="form-group">
                        <label class="col-sm-2 control-label"
                               for="input-order-status"><?php echo $info_data['entry_order_status']; ?></label>
                        <div class="col-sm-10">
                            <select name="order_status_id" id="input-order-status" class="form-control">
                                <?php foreach ($info_data['order_statuses'] as $order_statuses) { ?>
                                    <?php if ($order_statuses['order_status_id'] == $info_data['order_status_id']) { ?>
                                        <option value="<?php echo $order_statuses['order_status_id']; ?>"
                                                selected="selected"><?php echo $order_statuses['name']; ?></option>
                                    <?php } else { ?>
                                        <option
                                            value="<?php echo $order_statuses['order_status_id']; ?>"><?php echo $order_statuses['name']; ?></option>
                                    <?php } ?>
                                <?php } ?>
                            </select>
                        </div>
                    </div>

Answer 1

Try this:

from:

$('#order-status').html($('select[name=\'order_status_id\'] option:selected').text());

to:

$('#order-status').html($('#input-order-status option:selected').text());

if you want to call your selectbox with name then change it

to:

$('#order-status').html($('select[name="order_status_id"] option:selected').text());