如何在某个选项值上将类添加到 div答案

【问题标题】：How to add a class to a div on a certain option value如何在某个选项值上将类添加到 div
【发布时间】：2013-09-26 18:35:48
【问题描述】：

我想知道如果选项选择了值，如何将类添加到 div。例如，我正在为我表弟的公司创建一个网站，我们想要一种简单的方法来浏览菜单。

<code>
         <div id="select"><form>
         Menu:
         <select name="select" class="form-control">

           <option value="drinks">Drinks</option>
           <option value="breakfast">Breakfast</option>
         </select>
        <input type="submit" value="Submit">
         </form>
</code>

如果值是早餐，我希望隐藏 div drinks 并显示 div breakfast，并使其可逆。谢谢，这是我在 JSFiddle 上的代码 http://jsfiddle.net/t5R9s/

【问题讨论】：

@Gurminder Singh 有一个很好的 jquery 解决方案，我发布了一个 javascript 解决方案。在这种情况下，jQuery 更简洁、更容易，但我会使用 javascript，除非您要使用的不仅仅是 jquery 的“显示”和“隐藏”功能（您不必担心类名。）

标签： jquery html switch-statement option addclass

【解决方案1】：

在这里

$(document).ready(function() {
 $(".form-control").change(function() {
  if($(this).val() == "drinks") {
    $("#drinks").show();
    $("#breakfast").hide();
  } else {
    $("#drinks").hide();
    $("#breakfast").show();
  }
 });
});

这里是FIDDLE。

【讨论】：

可能想要将else 更改为else if，这样它就可以更容易地扩展到更多选项。虽然，我想在这种情况下会有更多的代码。 ---- 这只是给了我一个想法。
是的，但只需要四个字符就可以使其更具可扩展性。 :D

【解决方案2】：

您可以使用 javascript。您是想在点击提交时还是在您做出选择之后才这样做？

[

Fiddle

]

<script type="text/javascript">
function changeClass(){
    var myVariable = document.getElementById('control').value;
    if(myVariable == "drinks"){
        document.getElementById('drinks').className = "";
        document.getElementById('breakfast').className = "hide";
    }
    else if(myVariable == "breakfast"){
        document.getElementById('drinks').className = "hide";
        document.getElementById('breakfast').className = "";
    }
}
</script>
<div id="select">
    <form>Menu:
        <select name="select" class="form-control" id="control" onChange="changeClass()">
            <option value="drinks">Drinks</option>
            <option value="breakfast">Breakfast</option>
        </select>
    </form>
</div>
<div id="drinks">
     <h2 align="center">Drinks</h2>

    <table width="888" border="" cellpadding="9" class="">..</table>
</div>
<!--Breakfast table-->
<div id="breakfast" class="hide">
        <h2 align="center">Breakfast</h2>

    <table width="888" border="" cellpadding="9" class="">..</table>
</div>

【讨论】：

@undefined 大声笑，是的，我想我会告诉如何（javascript），然后展示如何做才能到达那里：D
我尝试过这样做，但检查一下它似乎不起作用：/ drkmg.us/hummusbar/site
以后请不要留下占位符答案。如果您对未来可能的答案有评论，请发表评论——您有足够的声誉。
@minitech 哈哈，哇，真不敢相信一个持续了 5 分钟的占位符被审核了，哈哈。我不止一次发布正确标记的答案迟到了，这就是我这样做的原因。谢谢你让我知道你们不喜欢那样。
是的，人们确实标记了它，所以 :D 不要担心快速回答，如果它超级棒，我们仍然会投票给你！