HTML如何在选择选项时绘制图片和文本？

时间：2014-11-04 23:12:37

标签： html css

我想在选择一个选项时在下拉菜单下面显示一张图片和一段文字。我是否必须制作另一个HTML文档，其中包含我希望它显示的内容并让它加载新页面，或者是否有办法在不必为每个选项加载新页面的情况下执行此操作？

我想在选择这两件事后对它们进行比较，这样就可以进行并列比较。

这基本上就是我所拥有的（我是网络开发的新手）：

<select align="left">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Pear">Pear</option>
</select>

if (value == "Apple")
{
    <img src ="apple.png"/>
}


<select align="right">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Pear">Pear</option>
</select>

2 个答案:

答案 0 :(得分：3)

Normaly我不会对javascript曝光有限的人采取jQuery方法。我会在这里，因为它使它成为一个相当简单的解决方案。

对于未启动的jQuery是一个javascript库，它使DOM导航和操作非常容易，并且可以解决一些跨平台问题。重要的是要很好地理解jasvascript的基础知识，而不是完全依赖于jquert（或任何其他库）。对javascript有深刻的理解，这将使您能够从任何给定的库中获得更多。

现在开始代码......

<强> HTML 

<div class="column">
  <select class="match">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Pear">Pear</option>
  </select>
  <div class="result"><!--Will be used to display results--></div>
</div>
<div class="column">
  <select class="match">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Pear">Pear</option>
  </select>
  <div class="result"><!--Will be used to display results--></div>
</div>

<!-- CSS will be used to hide these -->
<div class="templates">
  <!-- Put your images and text in the appropriate div based on  id
       ID should be the value from the select items --> 
  <div id="Apple">
    <h2>Apple</h2>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSFvne6oWopOQ2_GO180lwy0V9w6VkkZcW23O4pIEWZjjIdCcrU" />
    <!--- Put your content here -->
  </div>
  <div id="Bannana">
    <h2>Bannana</h2>
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSAUv8_U29YTlfHjGlMLegQH8YfQCozUGcVdqIqH3oxfDeSwucO" />
           <!--- Put your content here -->
  </div>

  <div id="Pear">
    <h2>Pear</h2>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYUDCELQm7ccg3VkCGZSjdCnNu0mrnKsFL4sBS-TRpAly8SfCoZFOAwg" />
            <!--- Put your content here -->
  </div>
</div>

基本CSS 

/*Make the columns*/
.column {
  display:inline-block;
  width:48%;
}

/*Hide the templates*/
.templates
{
  display:none;
}

<强>的JavaScript / jQuery的 

//Will fire when something with class "match" changes
$(".match").change(function(){     
     var selectedValue = $(this).val();

     //Get the html from the template with matching id
     var targetHTML = $("#" + selectedValue).html();
     var parentDiv = $(this).closest(".column");

     //Set html for the results container
     $(parentDiv).find(".result").html(targetHTML);
});

在尝试实现此功能之前，请务必阅读：

请注意，为了让我的脚本工作，您需要包含jQuery库，Google有托管版本，所以请使用它。您还需要将我的脚本放在$( document ).ready()

中

完整版/演示如下。

//Will fire when something with class "match" changes
$(".match").change(function(){     
     var selectedValue = $(this).val();
     //Get the html from the template with matching id
     var targetHTML = $("#" + selectedValue).html();
     var parentDiv = $(this).closest(".column");
     //Set html for the results container
     $(parentDiv).find(".result").html(targetHTML);
});
/*Make the columns*/
.column {
  display:inline-block;
  width:48%;
  vertical-align:top;
}

/*Hide the templates*/
.templates
{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="column">
  <select class="match">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Pear">Pear</option>
    
  </select>
  <div class="result"></div>
</div>
<div class="column">
  <select class="match">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Pear">Pear</option>
  </select>
  <div class="result"></div>
</div>

<div class="templates">
  <div id="Apple">
    <h2>Apple</h2>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSFvne6oWopOQ2_GO180lwy0V9w6VkkZcW23O4pIEWZjjIdCcrU" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel facilisis diam. Sed vitae ullamcorper mauris. Donec ac sapien vitae libero vestibulum interdum in finibus magna. Ut venenatis tortor in egestas finibus. Quisque commodo augue quis
      magna posuere, ut facilisis lectus posuere. Morbi sodales interdum tortor eget ornare. Proin sit amet ipsum eget nisi dapibus egestas.</p>
    <p>Sed ultrices leo ut elit consequat tempus. Pellentesque pulvinar lectus sed congue porta. Vivamus ac leo id metus malesuada faucibus. Quisque ac viverra quam, vel aliquet erat. Nulla semper urna eu rutrum sagittis. Vestibulum id magna ligula. Donec
      ac viverra metus. Donec sodales purus nec feugiat pulvinar.</p>
    <p>Sed malesuada sem sed tellus aliquet, vel tempus purus condimentum. Aenean vel est ut metus pellentesque vulputate. Donec eu ipsum suscipit magna maximus maximus. Phasellus ligula libero, tincidunt non laoreet at, interdum vel erat. Nullam sit amet
      aliquet sapien. Vivamus fermentum nisi eu massa vestibulum, ac auctor velit viverra. Duis vitae ligula nisl. Praesent pretium at enim at pulvinar. Vivamus commodo eros a sodales varius. Curabitur sed nisi quis eros vehicula rhoncus et at massa.
      Aenean ut leo neque. Nullam vel ultricies nisl, et porttitor tellus. Praesent sagittis facilisis purus, vitae euismod tellus lacinia at. Phasellus viverra, ante eu efficitur vehicula, nibh neque tempus libero, non tristique nulla risus eu sem. Vivamus
      rhoncus feugiat elementum. Praesent fermentum a lacus ac cursus.</p>
  </div>
  <div id="Banana">
    <h2>Bannana</h2>
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSAUv8_U29YTlfHjGlMLegQH8YfQCozUGcVdqIqH3oxfDeSwucO" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel facilisis diam. Sed vitae ullamcorper mauris. Donec ac sapien vitae libero vestibulum interdum in finibus magna. Ut venenatis tortor in egestas finibus. Quisque commodo augue quis
      magna posuere, ut facilisis lectus posuere. Morbi sodales interdum tortor eget ornare. Proin sit amet ipsum eget nisi dapibus egestas.</p>
    <p>Sed ultrices leo ut elit consequat tempus. Pellentesque pulvinar lectus sed congue porta. Vivamus ac leo id metus malesuada faucibus. Quisque ac viverra quam, vel aliquet erat. Nulla semper urna eu rutrum sagittis. Vestibulum id magna ligula. Donec
      ac viverra metus. Donec sodales purus nec feugiat pulvinar.</p>
    <p>Sed malesuada sem sed tellus aliquet, vel tempus purus condimentum. Aenean vel est ut metus pellentesque vulputate. Donec eu ipsum suscipit magna maximus maximus. Phasellus ligula libero, tincidunt non laoreet at, interdum vel erat. Nullam sit amet
      aliquet sapien. Vivamus fermentum nisi eu massa vestibulum, ac auctor velit viverra. Duis vitae ligula nisl. Praesent pretium at enim at pulvinar. Vivamus commodo eros a sodales varius. Curabitur sed nisi quis eros vehicula rhoncus et at massa.
      Aenean ut leo neque. Nullam vel ultricies nisl, et porttitor tellus. Praesent sagittis facilisis purus, vitae euismod tellus lacinia at. Phasellus viverra, ante eu efficitur vehicula, nibh neque tempus libero, non tristique nulla risus eu sem. Vivamus
      rhoncus feugiat elementum. Praesent fermentum a lacus ac cursus.</p>
  </div>

  <div id="Pear">
    <h2>Pear</h2>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYUDCELQm7ccg3VkCGZSjdCnNu0mrnKsFL4sBS-TRpAly8SfCoZFOAwg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel facilisis diam. Sed vitae ullamcorper mauris. Donec ac sapien vitae libero vestibulum interdum in finibus magna. Ut venenatis tortor in egestas finibus. Quisque commodo augue quis
      magna posuere, ut facilisis lectus posuere. Morbi sodales interdum tortor eget ornare. Proin sit amet ipsum eget nisi dapibus egestas.</p>
    <p>Sed ultrices leo ut elit consequat tempus. Pellentesque pulvinar lectus sed congue porta. Vivamus ac leo id metus malesuada faucibus. Quisque ac viverra quam, vel aliquet erat. Nulla semper urna eu rutrum sagittis. Vestibulum id magna ligula. Donec
      ac viverra metus. Donec sodales purus nec feugiat pulvinar.</p>
    <p>Sed malesuada sem sed tellus aliquet, vel tempus purus condimentum. Aenean vel est ut metus pellentesque vulputate. Donec eu ipsum suscipit magna maximus maximus. Phasellus ligula libero, tincidunt non laoreet at, interdum vel erat. Nullam sit amet
      aliquet sapien. Vivamus fermentum nisi eu massa vestibulum, ac auctor velit viverra. Duis vitae ligula nisl. Praesent pretium at enim at pulvinar. Vivamus commodo eros a sodales varius. Curabitur sed nisi quis eros vehicula rhoncus et at massa.
      Aenean ut leo neque. Nullam vel ultricies nisl, et porttitor tellus. Praesent sagittis facilisis purus, vitae euismod tellus lacinia at. Phasellus viverra, ante eu efficitur vehicula, nibh neque tempus libero, non tristique nulla risus eu sem. Vivamus
      rhoncus feugiat elementum. Praesent fermentum a lacus ac cursus.</p>
  </div>
</div>

答案 1 :(得分：0)

以下是使用JQuery的示例。

我正在使用选择来显示文字，但您可以使用相同的技术来显示图像。

＆＃13;
＆＃13; 
$(function() {
  $('select').change(function() {
    var $select = $(this);
    $select.next().text($select.val())
  });
})
＆＃13; 
.selector {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector">
  <select>
    <option></option>
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Pear">Pear</option>
  </select>
  <div></div>
</div>

<div class="selector">
  <select>
    <option></option>
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Pear">Pear</option>
  </select>
  <div></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题