Jquery 是否将不同的div id附加到选项选择？

我试图将不同的id附加到select元素中的选项。我可以用图片来做，但不知道如何用ID来做

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

$(document).ready(function() {
$("#selectanimage").change(function() {
    var src = $(this).val();

    $("#masterPreview").html(src ? "<img src='" + src + "'>" : "");
});
});

典型的选择是：

<select id="selectanimage" name="selectanimage" style="width: 474px;" class="required">
<option value="null">--- Select your Image ... ---</option>
<option value="share/images/125x125blk.png">125px x 125px Black Background</option>
<option value="share/images/125x125wht.png">125px x 125px White Background</option>
<option value="share/images/180x100blk.png">180px x 100px Black Background</option>
</select>

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

我想做的是。。将选项中的值更改为different class或id，然后让js相应地进行切换

所以期权价值=苹果 选项值=foo

我不确定这是否是100%清楚lol

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

即

单击选项时，表示有人单击了foo

然后我们将生成：

<div id="masterPreview">
   <div class="foo"></div>    
</div>

---

如果我对你的理解是正确的，坦率地说，我怀疑-你的问题非常令人困惑，你是说你想要一个select元素，其中选择不同的选项将显示不同的div

您认为这可以通过为每个选项指定一个值来实现，该值是要显示的div的类名，实际div包含在页面上其他地方的div masterPreview中，但您不知道如何编写代码，以便在选择不同选项时隐藏和显示相应的div

对于我总结的需求，这里有一个工作演示，这样您就可以看到我是否在大致范围内：

如果这与您希望执行的操作非常相似，那么以下是如何对其进行编码：

<style>
   #masterPreview > div { display: none; }
</style>

<select>
    <option value="none">--Please select--</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="carrot">Carrot</option>
</select>
<div id="masterPreview">
    <div class="apple">Apple Div</div>
    <div class="banana">Banana Div</div>
    <div class="carrot">Carrot Div</div>
</div>

<script>
$("select").change(function(){
    $("#masterPreview > div").hide();
    $("." + $(this).val()).show();
});
</script>

---

我认为最好的方法是动态创建内部预览

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

---

演示：

这是一个不错的选择，除非新创建的div的内容来自哪里？只是重复选择中已经显示的内容没有多大意义。当然，我假设现实世界的版本需要显示一些比一两句话更简单的东西。您也不允许“无”选项显示任何内容，当然这是一个微不足道的更改。@nnnnnn：是的，修复了“无”选项的问题。关于div的内容，最多为422：-