I have two input with the same name. One is input text and another is select option. I use two button named buttonShow and buttonHide. buttonShow replace the input text to select and buttonHide does the opposite. I've tried using replaceWith(), but it only works for the first time and not the second time. Is there any way to change it back and forth?
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">');
});
question from:
https://stackoverflow.com/questions/65856332/is-there-any-way-to-change-input-text-and-select-form-back-and-forth 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…