jQuery动态图像从选择变化

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

很难看不见HTML，但是。。。

var first = $("first-choice");

。。。最后缺少.val()。如果将其更改为此，它应该使您更接近您想要的内容：

var first = $("first-choice").val();

目前，您正在尝试将jQuery引用对HTML选项的jQuery引用到字符串值（sec）。

update

看上去有点进一步，发现了其他一些问题。。。

1）您正在使用HTML img元素，但是您给出了" Image-SWAP"的name属性值：

<img src="" name="image-swap">

。。。并正在尝试使用jQuery" ID"选择器引用它：

$("#image-swap")

为了使该选择器正常工作，您必须将name属性更改为and id属性，例如：

<img src="" id="image-swap">

2）您似乎正在尝试更新img标签的src属性，但是您的代码中没有那么正确的内容：

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

这里有几个问题：

• src并非作为变量存在，但是您似乎正在检查其存在
• 您想更新img的src属性，但是您使用的是.html()方法，该方法设置/获取标签的HTML内容，而不是其属性

要做您似乎想做的事情，您可能需要使用此代码：

$("#image-swap").attr("src", (first !== "" &&  + sec !== "") ? "pics/" + first + "/" + sec + ".jpg" : "");

如果两个选择都没有空值，则将更新带有图像位置的src属性，或者使用"，如果其中一个。

Answer 2

我发现了$("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 + "'>" : "");
    });
});

Answer 3

两件事：

您只需要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 to Echo，通常我会做<?php echo $row["name"]; ?>。