Jquery 删除下拉选项上的文本框

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

---

提前感谢您的帮助。

效果非常好->虽然在语法和逻辑上都可以改进，但您的代码似乎工作得很好：您确定没有将输入放在select的顶部是肯定没有将输入放在select的顶部。不否为什么对我不起作用：(

<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>