Estoy tratando de mostrar una imagen específica de diferentes tipos de enlaces usando la opción desplegable.
Lo que quiero hacer:
Tengo 6 tipos diferentes de enlaces, estos enlaces deben agregarse en la opción desplegable. Después de elegir la opción deseada (categoría) del menú desplegable, el cuadro de texto aparecerá en el cuadro de texto. Quiero escribir un nombre de imagen específico, por ejemplo , 1,2,3,4,5,6,7,8, etc... luego la imagen deseada será mostrado.
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.pngNecesito algún tipo de función JavaScript o jQuery para hacer esto. Investigué un poco sin suerte.
Si es posible crear algún tipo de función que funcione arriba, realmente lo agradecería.
El siguiente código muestra imágenes de solo una URL específica.
Lo que he probado:
<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" />Aquí estamos construyendo dinámicamente la URL de la imagen basada en el formulario. También he agregado una validación rudimentaria para orientarlo en la dirección correcta.
Asegúrese de configurar su URL base y su ruta correctamente.
$(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" />