将列表更改为下拉菜单并使选项单击jQuery

Question

我有一个网站，我正在建立响应。

在一页上有一个项目列表。当点击其中一个项目时，它会使用jQuery打开一个面板以显示图像。这里是我的HTML：

<h2>See the options</h2> 
    <ul class="list"> 
     <li id="click_item1">List Item 1</li> 
     <li id="click_item2">List Item 2</li> 
    </ul> 

...和jQuery代码，使这项工作：

jQuery('#click_item1').click(function() 
{ 
    jQuery(".togglepanel:visible").hide(); 
    jQuery("#panel_item1").fadeIn(); 
}); 

jQuery('#click_item2').click(function() 
{ 
    jQuery(".togglepanel:visible").hide(); 
    jQuery("#panel_item2").fadeIn(); 
}); 

看到这里的工作示例和代码：http://jsfiddle.net/5B8s5/1/

当网站是在一个较小的观察屏幕上，我想将列表更改为下拉列表。这部分很容易。问题是：如何让下拉菜单中的项目像链接列表一样使用，以便从下拉列表中选择一个项目时，它会触发正确的面板加载？

Answer 1

假设你的下拉列表看起来是这样的：

<select id="items"> 
    <option id="option_item1">Item 1</option> 
    <option id="option_item2">Item 2</option> 
</select> 

你要处理您的下拉菜单中的“改变”事件：

jQuery("#items").change(function() { 
    var item = jQuery("#items option:selected"); 
    jQuery(".togglepanel:visible").hide(); 
    jQuery("#" + item.attr("id").replace("option", "panel")).fadeIn(); 
});