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:
src
not exist variable, appear checking existence one- you want update
src
attribute 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