如何在選擇上顯示整個div

Question

每當有人從標簽中選擇某個選項時，我需要一些幫助，在其中顯示帶有表單的div。 我的代碼是這樣的：

    <script type="text/javascript">
        $(function() {
            $('#contactOptionSelect').change(function() {
                    $('.emailForm').hide();
                    $('#' + $(this).val()).show();
                });
            });

    </script>
        <div class="contactSelect" id="contactOptionSelect">
            <label for="selectContact">Contact us: </label>
            <select name="selectContact" class="selectContactType" style="width: 150px;"/>
                <option class="opt" value="">Please select</option>
                <option class="opt" id="helpOpt" value="">Help and Support</option>
                <option class="opt" id="emailOpt" value="">Email</option>
                <option class="opt" id="visitOpt" value="">Visit us!</option>
                <option class="opt" id="phoneOpt" value="">Phone</option>
            </select>
        </div>      
        <div class="emailForm" id="emailFormId">
            <form id="contactUsForm" method="post" action="">
                <div class="formSubject">
                    <label for="inputSubject">Subject</label>
                    <input type="text" width="50px" id="inputSubject" />
                </div>
                <div class="formBody">
                    <label for="inputBody">Email</label>
                    <textarea rows="15" cols="50" id="inputBody"></textarea>
                </div>
                <div class="formSubmit">
                    <input type="submit" id="inputSubmit" value="Send!"/>
                </div>
            </form>
        </div>

我想在選擇電子郵件選項時顯示最后一個表單。 我有點希望它像這樣工作： http ： //www.apple.com/privacy/contact/高標准我知道，但無論如何哈哈，提前感謝您的幫助！

Answer 1

你在找這樣的東西嗎？ http://jsbin.com/okakuy/edit#javascript,html

每當更改選擇選項時，我們隱藏任何div可見，並顯示哪個div具有當前選擇值作為其id屬性。

$("#parts").on("change", function(o){
  $(".panels")
    .find("> div:visible")
      .slideUp()
    .end()
    .find("#" + o.target.value)
      .slideDown();
});

再加上這個標記：

<select id="parts">
  <option>foo1</option>
  <option>foo2</option>
  <option>foo3</option>
</select>
<div class="panels">
  <div id="foo1">This is foo1</div>
  <div id="foo2">This is foo2</div>
  <div id="foo3">This is foo3</div>
</div>