如何在下一页中获取选定的图像?

时间:2018-06-20 05:39:05

标签: javascript php jquery

我有下拉选项以获取图像,并且在选择选项时显示图像。我想在下一页得到相同的图像。我该如何实现?

index.php

    <div class="col-md-2" style="color: #000; font-family:Titillium Web">
      <span style="color: #fff"> Pickup Location * </span>
      <select class='selectpicker1' id='colorselector' name='pickup_loc'>
        <option value=''></option>
        <option value='Building1'>Building1</option>
        <option value='Building2'>Building2</option>
      </select>
    </div>
    <div class="col-md-2 text-center">
      <br> <input type="text" id="pwr1" class="required p-control" name="pickup_ward" />
    </div>

    <div class="col-md-2" style="color: #000; font-family:Titillium Web ">
      <span style="color: #fff">  Drop Location *</span>
      <select class='selectpicker2' id='dropselector' name='drop_loc'>
        <option value=''></option>
        <option value='Floor1'>Floor1</option>
        <option value='Floor2'>Floor2</option>
      </select>
    </div>
    <div class="container colorselector show-image output">
      <div id="Building1" class="colors Building2">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWb3sciAdSaUG1Up0xz9facEB2bWr_OPZG6jNzHaQKcmwDBTB2iA" style="width: 100%" class="img-responsive" />
      </div>

      <div id="Building2" class="colors Building2">
        <img src="https://cdn.vox-cdn.com/thumbor/MJguYcgKkDes6NzbE8Y0OgdyF64=/0x0:1500x974/1200x800/filters:focal(630x367:870x607)/cdn.vox-cdn.com/uploads/chorus_image/image/56258041/2401_Third_Ave.0.jpg" style="width: 100%" class="img-responsive" />
      </div>
    </div>
    <div class="container dropselector show-image output">
      <div id="Floor1" class="colors Floor1">
        <img src="https://images.mydoorsign.com/img/lg/S/1-floor-number-braille-sign-se-6089.png" style="width: 100%" class="img-responsive" />
      </div>

      <div id="Floor2" class="colors Floor2">
        <img src="https://images.mydoorsign.com/img/lg/S/2-floor-number-braille-sign-se-6090.png" style="width: 100%" class="img-responsive" />
      </div>
    </div>
    $('#colorselector, #dropselector').change(function() {
  var select = $(this);
  $('.' + select.attr("id") + ' .colors').hide();
  $('#' + select.val()).show();
});

我要在下一页获取所选图像。

1 个答案:

答案 0 :(得分:1)

在JavaScript中,您可以使用会话存储来实现。

在第一页上,为图像URL设置所需的唯一键。

sessionStorage.setItem("myImage", "some url");

然后在下一页上检索图像:

sessionStorage.getItem("myImage");