单击单选按钮应将文本框更改为下拉列表

Question

我的 ASP.Net Core MVC 网页中有一个文本框和 2 个单选按钮，如下所示：

如果单击“现有”单选按钮，文本框应更改为下拉列表。如果单击“新建”单选按钮，下拉列表应更改为文本框。由于我对网络技术非常陌生，所以我不知道该怎么做。请帮忙。

<div class="table1">
  <label> Level 3 Num</label> 
  <input type="text" name="text1" class="l3n" placeholder="Level 3 Num" maxlength="100" style="margin:5px;width:400px; height:30px;border:1px solid #01579B;" />
  <label>
    <input type="radio" name="editList" value="new" />New
  </label>
  <label>
    <input type="radio" name="editList" value="existing" />Existing
  </label>
</div>

样式如下图：

<style>
  .table1 {
    display: inline-block
  }
</style>

Answer 1

首先您需要在输入中添加一个“id”，如下所示：

<input type="text" **id = 'new'** name="text1" class="l3n" placeholder="Level 3 Num" maxlength="100" style="margin:5px;width:400px; height:30px;border:1px solid #01579B;" />

然后创建一个带有 id="existing" 标签的 Select 标签，并显示“无”来保存现有选项。 完成后，您只需要一个事件处理程序：

function handleChange(e){
switch ( e.target.value) {
  case 'new':
    document.getElementById('new').style.display = 'block'
    document.getElementById('existing').style.display = 'none'
    break;

  case 'existing':
    document.getElementById('new').style.display = 'none'
    document.getElementById('existing').style.display = 'block'
    break;
}

}