将多个链接插入到选项标签并从所选链接中选择特定图像

Question

我正在尝试使用下拉选项显示来自不同类型链接的特定图像。

我想做的事：
我有 6 种不同类型的链接，这些链接需要添加到下拉选项中。从下拉列表中选择所需的 Option（类别）后，Textbox 将出现在我要写特定图像名称的文本框中，例如 1,2,3, 4,5,6,7,8 等...然后将显示所需的图像。

www.example.com/Category-1/images/8.png
www.example.com/Category-2/Imagess/3.png
www.example.com/Category-3/Imagess/5.png
www.example.com/Category-4/images/4.png
www.example.com/Category-5/images/7.png
www.example.com/Category-6/images/11.png

我需要某种 JavaScript 或 jQuery 函数来执行此操作。我做了一些研究，没有运气。

如果可以创建某种类型的函数来执行上述操作，我将不胜感激。

以下代码仅显示来自特定 URL 的图像。

我的尝试：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4"><br>
  <span>Please Choose desired Category</span>
  <select class="SelectID">
    <option value="1">Category-1</option>
    <option value="2">Category-2</option>
    <option value="3">Category-3</option>
    <option value="4">Category-4</option>
    <option value="5">Category-5</option>
    <option value="6">Category-6</option>
  </select>
</div>
<script type="text/javascript">
  $(function() {
    $('#btnShow').click(function() {
      $("#imgMain").attr("src", $("#txtImageUrl").val());
      $('#imgMain').width(200); // Units are assumed to be pixels
      $('#imgMain').height(200);

    })
  })
</script><br>
<div>
  Img URL:<input type="text" id="txtImageUrl" />
  <input type="button" id="btnShow" value="Show Image" />
</div>
<br />
<img id="imgMain" />

Answer 1

在这里，我们根据表单动态构建图像 URL。我还添加了一些基本验证来为您指明正确的方向。

请确保正确设置您的基本 URL 和路径。

$(function() {
  var category, folder, url;
  $(".SelectID").change(function() {
    category = $(this).val();
  });
  $("#folder").change(function() {
    folder = $(this).val();
  });
  $("#txtImageUrl").keyup(function() {
    url = $(this).val();
  });
  $('#btnShow').click(function() {
    if (category && folder && url) {
      $("#imgMain").attr("src", 'http://www.example.com/Category-' + category + '/' + folder + '/' + url + '.png').width(200).height(200);
    } else {
      console.log('You must choose a category and folder and set a url.');
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4"><br>
  <span>Please Choose desired Category</span>
  <select class="SelectID">
    <option value="3">Category-1</option>
    <option value="4">Category-2</option>
    <option value="5">Category-3</option>
    <option value="6">Category-4</option>
    <option value="7">Category-5</option>
    <option value="8">Category-6</option>
  </select>
</div>
<div class="col-md-4"><br>
  <span>Please Choose desired Folder</span>
  <select id="folder">
    <option value="images">images</option>
    <option value="Images">Images</option>
  </select>
</div>
<br>
<div>
  Img URL:<input type="text" id="txtImageUrl" />
  <input type="button" id="btnShow" value="Show Image" />
</div>
<br />
<img id="imgMain" />