1

オプションで値が選択されている場合、クラスを div に追加する方法を知りたいと思っていました。たとえば、いとこのビジネス用の Web サイトを作成していて、メニューを簡単にシャッフルする方法が必要です。

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

drinksdiv を非表示にして divを表示するための値が breakfast である場合、breakfastまたそれを元に戻すことができます。ありがとうございます JSFiddle http://jsfiddle.net/t5R9s/の私のコードです

4

2 に答える 2

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>
于 2013-09-26T18:38:07.063 に答える
1

ここにあります

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

これがフィドルです。

于 2013-09-26T18:45:00.347 に答える