有没有办法来回更改输入文本和选择表单？

Question

我有两个同名的输入。一个是输入文本，另一个是选择选项。我使用两个名为 buttonShow 和 buttonHide 的按钮。 buttonShow 替换要选择的输入文本，而 buttonHide 则相反。我试过使用replaceWith()，但它只适用于第一次而不是第二次。有没有办法来回改变它？

HTML

  <div class="input-group">
      <input type="text" class="form-control" name="family" id="family">
      <div class="input-group-append">
         <button class="btn btn-outline-secondary" type="button" id="buttonShow">Show</button>
         <button class="btn btn-outline-secondary" type="button" id="buttonHide">Hide</button>
      </div>
  </div>

JS

$("#buttonHide").hide();
$("#buttonShow").click(function() {
    $("#buttonHide").show();
    $("#buttonShow").hide();
    $("#family").replaceWith('<select class="form-control" name="family" id="family">' +
        '<option value="Capitellidae">CAPITELLIDAE</option>' +
        '<option value="Chaoboridae">CHAOBORIDAE</option>' +
        '<option value="Chironomidae">CHIRONOMIDAE</option>' +
        '<option value="Cirratulidae">CIRRATULIDAE</option>' +
        '<option value="Eunicidae">EUNICIDAE</option>' +
        '<option value="Littorinidae">LITTORINIDAE</option>' +
        '<option value="Lumbrinereidae">LUMBRINEREIDAE</option>' +
        '<option value="Sabellidae">SABELLIDAE</option>' +
        '<option value="Spionidae">SPIONIDAE</option>' +
        '<option value="Thiaridae">THIARIDAE</option>' +
        '<option value="Tubificidae">TUBIFICIDAE</option>' +
        '<option value="Turritellidae">TURRITELLIDAE</option>' +
        '</select>');
});
$("buttonHide").click(function() {
    $("#buttonHide").hide();
    $("#buttonShow").show();
    $("#family").replaceWith('<input type="text" class="form-control" name="family" id="family">');
});

Answer 1

$("buttonHide") 

缺少#。替换为

$("#buttonHide")