在选项中添加不同的div id？

我试图在select元素中的选项附加一个不同的id。 我可以用图像做到这一点，但不知道如何用ID来做

示例：对于我们使用的图像：

$(document).ready(function() { $("#selectanimage").change(function() { var src = $(this).val(); $("#masterPreview").html(src ? "" : ""); }); }); 

典型的选择是：

  --- Select your Image ... --- 125px x 125px Black Background 125px x 125px White Background 180px x 100px Black Background  

我想要做的是..更改选项中的值以区分class或id，然后让js相应地切换。

所以选项值=“apple”选项值=“foo”

我不确定这是100％清除哈哈

目标是Div id masterpreview可以包含选项的新类或id元素。

即。

点击选项（说有人点击了foo）

然后我们会生成：

Answer 1

如果我理解正确（坦率地说我怀疑 – 你的问题很混乱）你说你想要一个选择元素，选择不同的选项会显示不同的div。

您认为这可以通过为每个选项提供一个值来实现，该值是要显示的div的类名（实际div由页面上其他位置的div“masterPreview”包含），但您不知道如何编写代码以隐藏并在选择不同选项时显示相应的div。

对于我总结的要求，这里是一个工作演示，以便你可以看看我是否在球场： http ： //jsfiddle.net/abw3T/

如果这是你想要做的远程，那么这是如何编码它：

   --Please select-- Apple Banana Carrot  
 
Apple Div
 
Banana Div
 
Carrot Div
 
  

它实际上并不多：在选择的更改事件中，隐藏当前可见的所有masterPreview的子div，然后仅显示类名与所选选项的值匹配的子div。

注意：你不应该使用类来唯一地标识元素，这是id属性的用途，但是你的示例div使用了一个类，所以我坚持使用它。 除了带有.show()的行之外 ，代码与使用id的代码完全相同，这将是：

 $("#" + $(this).val()).show() 

Answer 2

我认为最好的方法是在div＃masterPreview中创建一个

。

 $("select").change(function(){ var option = $(this).val(); if (option == 'none') { $("#masterPreview").empty(); } else { $("#masterPreview").html($('
').addClass(option).html(option)); } });​ 

演示： http ： //jsfiddle.net/abw3T/2/