Question

尝试创建一个不错的动态选择过程。选择过程分为两部分：选择类别，然后选择名称。表单过程工作得很好。然后，我想根据所选名称显示图像。我似乎无法弄明白，这是代码：

<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

中提取图像

Answer 1

两件事：

您只需要1个文件准备好的包装：

$(document).ready(function(){
    $("#first-choice").change(function() {

       $.get("getter.php", { choice: $(this).val() }, function(data) {
            $("#second-choice").html(data);
        });
    });
    $("#card").change(function() {
        var first = $("first-choice");
        var sec = $(this).val();

        $("#image-swap").html(src ? "<img src='/pics/" + first + sec + "'>" : "");
    });
});

第二个，非你的选项有值，这就是它没有通过的原因。

<select id="first-choice" name="cardset">
    <?php foreach ($data as $row): ?>
        <option value="<?=$row["name"]?>"><?=$row["name"]?></option>
    <?php endforeach ?>
</select>

假设是否正确。我从来没用过=是php来回应，通常我会做<?php echo $row["name"]; ?>。

Answer 2

很难说没有看到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的{{1}}属性，但您使用的是img方法，该方法设置/获取标记的HTML内容，而不是其属性

要执行您似乎想要执行的操作，您可能需要使用以下代码：

.html()

如果两个选项都没有空值，那么将使用图像位置更新$("#image-swap").attr("src", (first !== "" && + sec !== "") ? "pics/" + first + "/" + sec + ".jpg" : "");属性，如果其中一个选项具有空值，则更新{“。

Answer 3

我想出了$("first-choice").val()并尝试了这个，

$(document).ready(function(){
    $("#first-choice").change(function() {
    $.get("getter.php", { choice: $(this).val() }, function(data) {
        $("#second-choice").html(data);
    });
});


    $("#card").change(function() {
    var first = $("first-choice").val();
    var sec = $(this).val();

    $("#image-swap").html(src ? "<img src='/pics/" + first + sec + "'>" : "");
    });
});

Jquery动态图像从选择中改变

3 个答案: