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 of img, 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

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -