javascript - Jquery dynamic image change from selection -
trying create nice dynamic selection process. there 2 parts selection process: choose category, choose name. form process works fine. want display image based on name chosen. can't seem figure out, here's code:
<form action="file.php" method="post"> <select id="first-choice" name="cardset"> <?php foreach ($data $row): ?> <option><?=$row["name"]?></option> <?php endforeach ?> </select> <select id="second-choice" name="card"> <option>please choose above</option> </select> <img src="" name="image-swap"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script language=javascript > $(document).ready(function() { $("#first-choice").change(function() { $.get("getter.php", { choice: $(this).val() }, function(data) { $("#second-choice").html(data); }); }); }); $(document).ready(function() { $("#card").change(function() { var first = $("first-choice"); var sec = $(this).val(); $("#image-swap").html(src ? "<img src='/pics/" + first + sec + "'>" : ""); }); }); </script> i trying pull image pics/"first"/"sec".jpg
hard tell without seeing html, . . .
var first = $("first-choice"); . . . missing .val() @ end. if change this, should closer looking for:
var first = $("first-choice").val(); at moment, trying append jquery reference html option string value (sec).
update
was looking little further , found other issues . . .
1) using html img element, you've given name attribute value of "image-swap":
<img src="" name="image-swap"> . . . , trying reference jquery "id" selector:
$("#image-swap") in order selector work, must change name attribute , id attribute, this:
<img src="" id="image-swap"> 2) appear attempting update src attribute of img tag, don't have quite right in code:
$("#image-swap").html(src ? "<img src='/pics/" + first + sec + "'>" : ""); there couple of issues here:
srcnot exist variable, appear checking existence one- you want update
srcattribute ofimg, using.html()method, sets/gets html content of tag, not attributes
to appear wanting do, need use code:
$("#image-swap").attr("src", (first !== "" && + sec !== "") ? "pics/" + first + "/" + sec + ".jpg" : ""); that update src attribute image location, if neither of selections has empty value, or "", if 1 of them does.
Comments
Post a Comment