Javascript 如何用文本输入动态替换物化选择？

我试图在用户点击另一个按钮时，从物化选择到文本输入的变化

我已尝试使用.replaceWith，instance.destroy；，和$this.remove全部无效

HTML:

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<h5>Materialize select</h5>


<div class="row">
 <div class="input-field col s12">
   <i class="material-icons prefix">device_hub</i>
   <select id="mySelect" class="change_select_to_text_on_other">
     <option value=""  selected>Choose "Other" to trigger!</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="other">Other</option>
   </select>
    <!--This is what I would like replace the select option with when other is clicked!:
    <input id="first_name" type="text" class="validate">
    <label for="first_name">Make your own selection!</label-->
 </div>
</div>

JS:

当用户单击其他选项时，选择将替换为文本输入

---

谢谢

这接近你想要的吗？我使用了materialize.js的更新版本

所以我使用$select1.formSelect；而不是$select1.material\u select

完整代码：

$(function () {
    var $select1 = $('#mySelect');

    $select1.formSelect();
    $select1.on('change', function (e) {

        if (e.target.value == 'other') {
            $(this).replaceWith(`<input id="first_name" type="text" class="validate">
            <label for="first_name">Make your own selection!</label>`);
            $( ".select-dropdown.dropdown-trigger" ).remove();
            $( ".caret" ).remove();

        }
    });
})

$(function () {
    var $select1 = $('#mySelect');

    $select1.formSelect();
    $select1.on('change', function (e) {

        if (e.target.value == 'other') {
            $(this).replaceWith(`<input id="first_name" type="text" class="validate">
            <label for="first_name">Make your own selection!</label>`);
            $( ".select-dropdown.dropdown-trigger" ).remove();
            $( ".caret" ).remove();

        }
    });
})