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

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

JQUERY：

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

注：.htmlselectのオプションの値を含ま ないページ名のみを指定する.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>

ノート

シンテックスは少し間違っているかもしれませんが、方法はこれです

于 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 に答える