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

Question

我有两个同名输入。一个是输入文本，另一个是 select 选项。我使用两个名为 buttonShow 和 buttonHide 的按钮。 buttonShow 将输入文本替换为 select，而 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")

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

Is there any way to change input text and select form back and forth?

php

html

jquery

codeigniter-3