Question

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

做到这一点

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

$(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>

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

所以选项值=“苹果” option value =“foo”

我不确定那是100％清除lol

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

即

点击选项（比如有人点击了foo）

然后我们会生成：

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

Answer 1

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

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

对于我总结的要求，这是一个有效的演示，以便您可以看到我是否在球场：http://jsfiddle.net/abw3T/

如果这与你想做的一样，那就是如何编码：

<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的更改事件中隐藏所有当前可见的masterPreview的子div，然后只显示类名与所选选项的值匹配的那个。

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

.show()

Answer 2

我认为最好的方法是在div＃masterPreview中动态创建<div>。

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

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

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

2 个答案: