jQuery动态图像从选择中改变答案

【问题标题】：Jquery dynamic image change from selectionjQuery动态图像从选择中改变
【发布时间】：2014-01-31 16:45:25
【问题描述】：

尝试创建一个不错的动态选择过程。选择过程分为两个部分：选择类别，然后选择名称。表单过程工作得很好。然后我想根据选择的名称显示图像。看不懂，代码如下：

<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 中提取图像

【问题讨论】：

标签： javascript jquery forms dynamic

【解决方案1】：

不看 HTML 就很难判断，但是 . . .

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

。 . .最后缺少.val()。如果你把它改成这个，它应该让你更接近你正在寻找的东西：

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

目前，您正尝试将 jQuery 对 HTML 选项的引用附加到字符串值 (sec)。

更新

看了一点，发现了一些其他的问题。 . .

1) 您正在使用 HTML img 元素，但您已将 name 属性值指定为“image-swap”：

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

。 . .并尝试使用 jQuery“id”选择器来引用它：

$("#image-swap")

为了使该选择器起作用，您必须将name 属性更改为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 属性，如果两个选择都没有空值，或者使用“”，如果其中一个有。

【讨论】：

你最了解我想要做什么。但是我忽略了我正在尝试从 pics/first/sec.jpg 中提取图像，并且它无法与我添加的内容一起使用... $("#image-swap").attr("src", (第一个 !== "" && + sec !== "") ?"pics/" + first "/" sec".jpg" : "");
你几乎拥有它。 . .您在代码中缺少一些 String 连接运算符 (+)。 . .应该是：$("#image-swap").attr("src", (first !== "" && + sec !== "") ? "pics/" + first + "/" + sec + ".jpg" : "");。我已更新我的代码以匹配您正在寻找的 src 的最终格式。
谢谢.. 不过，我似乎无法获得零钱。选择过程仍然有效，但没有出现图片。我检查并确保文件路径正确，并且是在我将默认 src 设置为图像时。以下是它的工作方式：选择选项 1 --> 选择选项 2 --> 图像根据选择显示。
图片的完整路径和这段代码所在的 HTML 页面的完整路径是什么？可能是相对路径的关系有问题。
我有 #card 作为更改参数，但是正如您指出的那样，这不是 id，第二选择是，所以我将其更改为，它触发，但找不到图像，第一个路径被定义为未定义（首先没有被定义......虽然是秒）：localhost/~myname/mysite/pics/undefined/Image.jpg

【解决方案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 + "'>" : "");
    });
});

【讨论】：

你不需要找到选择的选项来获得它的价值。 . . ($("first-choice").children(":selected").val();)。 . . $("first-choice").val(); 会给你选择框的当前值（即当前选择的选项的值）。

【解决方案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来回显，通常我会做<?php echo $row["name"]; ?>。

【讨论】：