멋진 동적 선택 프로세스를 만들려고합니다. 선택 과정에는 두 부분이 있습니다. 카테고리를 선택한 다음 이름을 선택합니다. 양식 프로세스는 잘 작동합니다. 그런 다음 선택한 이름을 기반으로 이미지를 표시하고 싶습니다. 알아낼 수없는 것 같습니다. 여기에 코드가 있습니다.
<form action="file.php" method="post">
<select id="first-choice" name="cardset">
<?php foreach ($data as $row): ?>
<option><?=$row["name"]?></option>
<?php endforeach ?>
</select>
<select id="second-choice" name="card">
<option>Please choose from 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>
pics / "first"/ "sec".jpg에서 이미지를 가져 오려고합니다.
HTML을 보지 않고는 말하기 어렵지만. . .
var first = $("first-choice");
. . . .val()끝에 가 없습니다 . 이렇게 변경하면 찾고있는 내용에 훨씬 더 가까워 질 것입니다.
var first = $("first-choice").val();
현재 HTML 옵션에 대한 jQuery 참조를 문자열 값 ( sec) 에 추가하려고합니다 .
최신 정보
조금 더 찾고 있었고 다른 문제를 발견했습니다. . .
1) HTML img요소를 사용하고 있지만 여기 name에 "image-swap"속성 값을 지정했습니다 .
<img src="" name="image-swap">
. . . jQuery "id"선택기로 참조하려고합니다.
$("#image-swap")
해당 선택기가 작동하려면 다음과 같이 name속성을 및 id속성으로 변경해야합니다 .
<img src="" id="image-swap">
2) 태그 의 src속성 을 업데이트하려고 시도하는 것 img같지만 코드에 제대로 표시되어 있지 않습니다.
$("#image-swap").html(src ? "<img src='/pics/" + first + sec + "'>" : "");
여기에 몇 가지 문제가 있습니다.
src 변수로 존재하지 않지만 하나로 존재하는지 확인하는 것으로 보입니다.src속성 을 업데이트하고 img싶지만 .html()해당 속성이 아닌 태그의 HTML 콘텐츠를 설정 / 가져 오는 메소드를 사용하고 있습니다.원하는 작업을 수행하려면 다음 코드를 사용해야합니다.
$("#image-swap").attr("src", (first !== "" && + sec !== "") ? "pics/" + first + "/" + sec + ".jpg" : "");
src선택 항목에 비어있는 값이없는 경우 이미지 위치로 속성 이 업데이트되고 , 값이 비어있는 경우 ""로 업데이트됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다