在文件上传和文本框之间切换

Question

我必须创建一个网站，向用户提供添加网站地址（文本）或上传文件的选项。

我提供了一个下拉菜单，使他们可以选择文件或链接。

基于选择，我希望下一个元素（输入元素）更改为文本框或文件上传。

我该如何实现？

链接选项-

文件选项-

当前它是硬编码的。

添加了一个代码段。

<div>
  <label>UpdateFileType</label>
  <select asp-for="UpdateFileType">
    <option>File</option>
    <option>Link</option>
  </select>
</div>

<div>
  <label>UpdateFileLink</label>
  <input name="UpdateFileLink" class="files" type="file" />
</div>
<div>
  <label>UpdateFileLink</label>
  <input class="link" />
</div>

Answer 1

使用id，并在更改事件显示时基于div隐藏id。

$("#div2").hide();
$("#ddchange").change(function() {
  var link = $(this).val();
  if (link == 'File') {
    $("#div1").show();
    $("#div2").hide();
  } else {
    $("#div1").hide();
    $("#div2").show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>UpdateFileType</label>
  <select asp-for="UpdateFileType" id="ddchange">
    <option>File</option>
    <option>Link</option>
  </select>
</div>

<div id="div1">
  <label>Update File Link</label>
  <input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="div2">
  <label>Update Link</label>
  <input class="link" />
</div>

Answer 2

<div>
  <label>UpdateFileType</label>
   <select  onchange="toggleField()" id="ddlFileType">
        <option value="File">File</option>
        <option value="Link">Link</option>
     </select>
</div>

<div id="file" style="display:none">
  <label>UpdateFileLink</label>
  <input name="UpdateFileLink" class="files" type="file" />
</div>
<div id="link" style="display:none">
  <label>UpdateFileLink</label>
  <input class="link" />
</div>
<script>
function toggleField() {

var x = document.getElementById("ddlFileType");
switch (x.value) {
	case 'Link':
		document.getElementById("file").style = "display:none";
		document.getElementById("link").style = "display:block";
		break;
	case 'File':
		document.getElementById("link").style = "display:none";
		document.getElementById("file").style = "display:block";
		break;
}
}
</script>