将不同的div ID附加到选项选择吗? [英] Append different div id to option selects?

问题描述

我正在尝试将其他id附加到select元素内的选项.我可以用图片来做，但是不知道如何用ID来做

I am trying to append a different id to options within select element. I can do this with images, but dont know how to do it with ID's

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

Example: for images we use:

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

我想做的是..更改选项的值以区分类或id，然后让js进行相应的切换.

What I want to do is .. change value in options to differenct class or id, and then get the js to switch accordingly.

所以选项value ="apple" 选项value ="foo"

So option value="apple" option value="foo"

我不确定那是否是100％清晰的笑声

Im not sure if thats 100% clear lol

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

The objective is that the Div id masterpreview can contain the new class or id element of the option.

即.

点击选项(例如有人点击了foo)

on click of option ( say someone clicked foo )

然后我们将生成:

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

推荐答案

如果我正确理解您的话(坦率地说，我对此表示怀疑-您的问题非常令人困惑)，则表示您要在选择其他选项时使用select元素将显示不同的div.

If I understand you correctly (which quite frankly I doubt - your question is very confusing) you are saying that you want to have a select element where choosing different options will display different divs.

您认为可以通过给每个选项一个值作为要显示的div的类名来实现(其中实际的div由页面上其他地方的div"masterPreview"包含)，但是您没有这样做了解选择不同选项时如何编写代码以隐藏和显示相应的div.

You think this can be achieved by giving each option a value that is the class name of the div to be shown (where the actual div is contained by the div "masterPreview" elsewhere on the page), but you don't know how to write the code to hide and show the corresponding divs when different options are selected.

对于 I 所概述的要求，下面是一个有效的演示，以便您可以查看我是否在球场上:

For the requirement as I have summarised it, here's a working demo so that you can see if I'm even in the ballpark: http://jsfiddle.net/abw3T/

如果这很像您要执行的操作，那么这就是如何编写代码:

If that's remotely like what you want to do then this is how to code it:

<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事件上，隐藏当前可能可见的masterPreview的所有子div，然后仅显示其类名与所选选项的值匹配的子div.

There's really not much too it: on the change event for the select hide all any of the masterPreview's child divs that might currently visible and then show only the one with the class name matching the value of the selected option.

注意:您不应该使用类来唯一标识元素，这就是id属性的用途，但是示例div使用了一个类，因此我一直坚持使用.对于具有.show()的行，使用ids 进行编码的代码完全相同，即为:

Note: you shouldn't use classes to uniquely identify elements, that's what the id attribute is for, but your sample div uses a class so I've stuck with that. The code would be exactly the same to do it with ids except for the line with .show() which would be:

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

这篇关于将不同的div ID附加到选项选择吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！