javascript - 文件上传和文本框切换

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this 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 并在更改事件时显示隐藏基于 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>