删除下拉选项上的文本框

Question

<select name="job_type" id="job_type">
    <option value="">--Select One--</option>
    <option value="rotating">Rotating</option>
    <option value="permanent">Permanent</option>
    <option value="other">Other</option>
</select>
<span>
    <input style="display: none; height: 20px; width: 180px; margin-top: -20px; margin-left: 145px;" type="text" name="other_job_type" id="other_value1" />
</span>

$('#job_type').change(function(){
    if (($('#job_type').val()) == 'other') {
        $('#other_value1').show();
    } else if( ($('#job_type').val()) != 'other'){
        $('#other_value1').hide();
    }
});

当选择其他选项时，代码应显示文本框，并在选择任何其他选项时将其删除。但由于某种原因，当我选择其他文本框时会显示。但如果我想更改它并选择其他选项，下拉列表不允许我选择其他选项（下拉选项）。

先谢谢你的帮助..