i have select menu 4 color options, , 3 images each option. want make image directory change 3 images when user selects different option in select menu.
<img src="images/black/img1.jpg" /> <img src="images/black/img2.jpg" /> <img src="images/black/img3.jpg" /> <select> <option value="black">black</option> <option value="red">red</option> <option value="indigo">indigo</option> <option value="teal">teal</option> </select> i'm assuming there way use wildcards in jquery, apparently i'm not proficient enough figure out.
try - note gave imgs class , select id
$(function() { // when page has loaded $("#color").on("change",function() { // assign event handler var col=$(this).val(); // value of select $(".img").each(function() { // gave imgs class var srcparts = this.src.split("/"); // split src on / this.src="images/"+col+"/"+srcparts.pop(); // take image name }) }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img class="img" src="images/black/img1.jpg" /> <img class="img" src="images/black/img2.jpg" /> <img class="img" src="images/black/img3.jpg" /> <select id="color"> <option value="black">black</option> <option value="red">red</option> <option value="indigo">indigo</option> <option value="teal">teal</option> </select>