Question

我试图根据通过下拉列表选择的项目创建一个显示不同图像的表单，我已完成此操作但现在需要将每个图像链接到其产品页面（html）但不确定如何？

<center>
<form name="mygallery"><p>
<select name="picture" size="1" onChange="showimage()">
<option selected value="images/products_lights/chandler_blue.jpg">Gem Light Blue</option>
<option value="images/products_lights/chandler_pink.jpg">Gem Light Pink</option>
<option value="images/products_lights/gem_white.jpg">Gem Light White</option>
<option value="images/products_lights/chandler_pink2.jpg">Chandelier Pink</option>
<option value="images/products_lights/chandler_white.jpg">Chandelier White</option>
<option value="images/products_lights/pod_black.jpg">Pod Light Black</option>
<option value="images/products_lights/pod_blue.jpg">Pod Light Blue</option>
<option value="images/products_lights/pod_gold.jpg">Pod Light Gold</option>
<option value="images/products_lights/pod_green.jpg">Pod Light Green</option>
<option value="images/products_lights/pod_red.jpg">Pod Light Red</option>
<option value="images/products_lights/pod_silver.jpg">Pod Light Silver</option>
<option value="images/products_lights/shade_black.jpg">Shade Black</option>
<option value="images/products_lights/shade_blue.jpg">Shade Blue</option>
</select>
</p>
</form>
</center>


<p align="center"><img src="images/products_lights/chandler_blue.jpg" name="pictures" width="90%" height="90%">

我想过可能会添加一个提交按钮，但又不确定如何更改它指向的网址？...

Answer 1

您可以在选择时根据选择使用javascript重定向，因此您不需要按钮。既然你标记了jQuery，这应该给你一个开始：

$('select').on('change',function() {
    window.location = 'http://example.com/' + $(this).val();
});

Answer 2

通过action标记的<form>属性指定了网址。但您也可以使用formaction属性在提交按钮代码中指定网址。不能真正帮助更多，因为我不知道你的脚本看起来如何。

但是这里有一个可以帮助你的片段：

function showimage() {
  var selection = document.getElementById("picture").value;
  var url = selection.split("/");
  document.getElementById("pictures").src = selection;
  document.getElementById("send").formAction = "http://www.example.com/" + url[url.length - 1];
}

<!DOCTYPE html>
<html>
<body>
  <center>
    <form name="mygallery">
      <select name="picture" id="picture" size="1" onChange="showimage()">
        <option selected value="images/products_lights/chandler_blue.jpg">Gem Light Blue</option>
        <option value="images/products_lights/chandler_pink.jpg">Gem Light Pink</option>
        <option value="images/products_lights/gem_white.jpg">Gem Light White</option>
        <option value="images/products_lights/chandler_pink2.jpg">Chandelier Pink</option>
        <option value="images/products_lights/chandler_white.jpg">Chandelier White</option>
        <option value="images/products_lights/pod_black.jpg">Pod Light Black</option>
        <option value="images/products_lights/pod_blue.jpg">Pod Light Blue</option>
        <option value="images/products_lights/pod_gold.jpg">Pod Light Gold</option>
        <option value="images/products_lights/pod_green.jpg">Pod Light Green</option>
        <option value="images/products_lights/pod_red.jpg">Pod Light Red</option>
        <option value="images/products_lights/pod_silver.jpg">Pod Light Silver</option>
        <option value="images/products_lights/shade_black.jpg">Shade Black</option>
        <option value="images/products_lights/shade_blue.jpg">Shade Blue</option>
      </select>
      <input type="submit" id="send" />
    </form>
  </center>
  <p align="center">
    <img src="images/products_lights/chandler_blue.jpg" name="pictures" id="pictures" width="90%" height="90%">
  </p>
  <script>
    showimage()
  </script>
</body>

</html>

Answer 3

你可以通过<option value="imageurl##producturl">Gem Light Blue</option> 然后在showimage(combinedurl)中，您可以拆分var split_image_product_url = combinedurl.split('##');，然后轻松使用split_image_product_url[0]获取图片网址，split_image_product_url[1]轻松使用产品页网址。

请注意，这只是一个想法，可以通过多种方式使用隐藏字段值等来实现相同的目标。

Answer 4

为包含产品网址的每个选项添加属性data-url，查看该代码示例。

＆＃13;

function changeProduct(selectNode){
  $option_selected = $(selectNode).find(':selected'); 
  $prod_link = $('#product');
  $prod_link.attr('href', $option_selected.attr('data-url'));
  $prod_link.find('img').attr('src', $option_selected.val());
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="changeProduct(this)">
  <option value="" disabled selected>Select a product</option>
  <option value="http://images.all-free-download.com/images/wallpapers_large/tree_of_light_wallpaper_landscape_nature_wallpaper_1210.jpg" data-url="www.google.com">Product 1</option>
  <option value="http://blog-imgs-52.fc2.com/l/a/n/landscape928/Landscape-Wallpapers.jpg" data-url="www.stackoverflow.com">Product 2</option>
</select><br><br>

<a href="about:blank" id="product"><img src="http://frankfortecig.com/wp-content/uploads/2014/07/placeholder-Copy-2.gif" alt="product" ></a>

＆＃13;

添加多个提交按钮

4 个答案: