Javascript 加载图像的相应HTML页面

我在下拉列表中有一组图像，当我从中选择一个图像时，相应的图像正在加载

我的问题是，如果我点击图像，它必须带我到图像的相应HTML页面。我正在jQuery中执行它。我代表了下面的代码，你也可以参考这个链接

HTML:

JQUERY：

<script type="text/javascript">
  $(document).ready(function() {
    $("#image1").change(function() {
      $("#imagePreview").empty();
      if ( $("#image1").val()!="" ) {
        $("#imagePreview").append("<img src=\"" + $("#image1").val()  + "\" />");
      } else {
        $("#imagePreview").append("");
      }
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $("#image1").change(function() {
      $("#imagePreview").empty();
      if ( $("#image1").val()!="" ) {
        window.location.href = "http://domain/" + $(this).val() + ".html";
      } else {
        //anything
      }
    });
  });
</script>

HTML:

笔记

---

可能syntex有些错误，但方法是这样的

请检查jQuery代码：

       $(document).ready(function() {
            $("#image1").change(function() {
                $("#imagePreview").empty();
                if ( $("#image1").val()!="" ){
                    var url = $("#image1 option:selected").attr('alt');
                    alert(url);
                    $("#imagePreview").attr('href',url);
                    $("#imagePreview").append("<img src=\"" +$("#image1").val()  + "\" />");
                }
                else{
                    $("#imagePreview").append("");
                }
            });
        });

---

在此代码中$image1选项：selected.attr'alt'；将返回所选下拉列表项的“alt”属性值。在的帮助下，您可以提供相应HTML页面的链接。

@Sahil谢谢！。它的工作，但问题是，如果点击下拉菜单，它会直接进入相应的页面。但我需要显示图像，然后点击图像，相应的页面应该被加载！等一下，我看看有没有可能，谢谢！让我试试，然后将结果发布给你！好的，如果完成了，请将其标记为其他人看到的可以识别@Sagar的答案…尝试使用您的代码，只需获得一个缩略图，然后单击它重定向到主页！我已经编辑了一些部分，检查警报，它是否显示正确的url？如果没有，则将字符串域名预先添加到“url”变量。我已经试过了，对我来说效果很好。我没有注意到“imagePreview”是一个锚定标签。现在我已经在此基础上编辑了代码。查看新的解决方案。在这种情况下，使用带有“alt”属性的给定select标记应该可以工作。。正因为如此，它正在重定向到主页。

<script type="text/javascript">
  $(document).ready(function() {
    $("#image1").change(function() {
      $("#imagePreview").empty();
      if ( $("#image1").val()!="" ) {
        window.location.href = "http://domain/" + $(this).val() + ".html";
      } else {
        //anything
      }
    });
  });
</script>

<script type="text/javascript">
      $(document).ready(function() {
        $("#image1").change(function() {
          $("#imagePreview").empty();
          if ( $("#image1").val()!="" ) {
            "$("#imagePreview").append("<a src="http://domain/" + $(this).val() + ".html"> <img src=\"" + $(this).attr("alt");  + "\" /></a>");
          } else {
            //anything
          }
        });
      });
    </script>

       $(document).ready(function() {
            $("#image1").change(function() {
                $("#imagePreview").empty();
                if ( $("#image1").val()!="" ){
                    var url = $("#image1 option:selected").attr('alt');
                    alert(url);
                    $("#imagePreview").attr('href',url);
                    $("#imagePreview").append("<img src=\"" +$("#image1").val()  + "\" />");
                }
                else{
                    $("#imagePreview").append("");
                }
            });
        });