Inserting multiple links to option tag and choosing a specific image from chosen link-CodePudding

I am trying to display an specific image from different types of links using dropdown option.

What I want to do:
I have 6 different types of links these links needs to be added into dropdown option. After the desired Option (category) is chosen from dropdown, Textbox will appear in the textbox I want to write specific image name for example 1,2,3,4,5,6,7,8, etc... then desired image will be displayed.

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

I need a some sort of JavaScript or jQuery Function to do this. I did some research with no luck.

If it's possible to create some type of function that performs above I would really appreciate that.

The code below shows images from only specific URL.

What I've tried:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ><br>
  <span>Please Choose desired Category</span>
  <select >
    <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" />

CodePudding user response：

Here we are dynamically building the image URL based on the form. I've added some rudimentary validation also to point you in the right direction.

Please make sure to set your base URL and path correctly.

$(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 ><br>
  <span>Please Choose desired Category</span>
  <select >
    <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 ><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" />