-4

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

我的问题是，如果我单击图像，它必须将我带到图像的相应 HTML 页面。我在 jQuery 中执行它。我已经代表了下面的代码，你也可以参考这个链接 http://www.olivepropertyglobalsolutions.com/

HTML：

<div class = "right">
  <h4 class = "heading"> Browse Listings </h4>
  <select style = "margin-top: 55px; margin-left: 18px;" name="image" id="image1" class="inputbox" size="1">
    <option value=""> - Select - </option>
    <option value="thumbs/3.jpg" >Farm Lands</option>
    <option value="thumbs/1.jpg" alt = "flat.html">Flats</option>
    <option value="thumbs/2.jpg" alt = "house.html">Houses</option>
    <option value="thumbs/4.jpg" alt = "vacant.html">Vacant Lands</option>
    <option value="thumbs/5.jpg" alt = "villa.html">Villas</option>
  </select>
  <div style = "margin-left: 14px;">
    <a id="imagePreview" href = ""> </a>
  </div>
</div>

查询：

<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>
4

2 回答 2

0

HTML：

<div class = "right">
  <h4 class = "heading"> Browse Listings </h4>
  <select style = "margin-top: 55px; margin-left: 18px;" name="image" id="image1" class="inputbox" size="1">
    <option value=""> - Select - </option>
    <option value="farm-land" >Farm Lands</option>
    <option value="flats" alt = "flat.html">Flats</option>
    <option value="house" alt = "house.html">Houses</option>
    <option value="vacant" alt = "vacant.html">Vacant Lands</option>
    <option value="villas" alt = "villa.html">Villas</option>
  </select>        
</div>

查询：

<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提供选择中的选项值， .html/.php/any extension并且站点 URL 可以附加在 JS 中

新要求

添加图像及其链接

<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>

笔记

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

于 2013-03-08T07:27:46.593 回答
0

请检查这个 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 option:selected").attr('alt');中，将返回下拉列表中所选项目的“alt”属性值。在您的帮助下，<a href="">您可以提供指向相应 HTML 页面的链接。

于 2013-03-08T07:47:53.457 回答