在文件上传和文本框之间切换[关闭]答案

【问题标题】：Switch between file upload and text box [closed]在文件上传和文本框之间切换[关闭]
【发布时间】：2018-11-12 11:13:07
【问题描述】：

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

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

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

我如何做到这一点？

链接选项 -

文件选项 -

目前它是硬编码的。

添加了一个 sn-p。

<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>

【问题讨论】：

分享一个 sn-p 或任何小提琴链接。
试试这个：codepen.io/anupam-the-reactor/pen/NEbraw

标签： javascript jquery html asp.net asp.net-core-mvc

【解决方案1】：

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

$("#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>

【讨论】：

【解决方案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>

【讨论】：