jquery - 如何在某个选项值上将类添加到 div

Question

我想知道如果选项选择了值，如何将类添加到 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>

如果值是早餐，我想隐藏 divdrinks并显示 div breakfast，并且它也是可逆的。谢谢，这是我在 JSFiddle 上的代码http://jsfiddle.net/t5R9s/

Answer 1

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

[

小提琴

]

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

Answer 2

这里是

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

这是FIDDLE。