根據下拉菜單中的選擇更改div的內容

基於用戶從下拉菜單中選擇，是否有一種使用JavaScript動態顯示/隱藏<div>中的內容的簡單方法？例如，如果用戶選擇option 1，那麼我想要顯示<div> 1，並且隱藏所有其他<div>。根據下拉菜單中的選擇更改div的內容

編輯：實施例HTML設置

<select> 
<option> Option 1</option> 
<option> Option 2</option> 
<option> Option 3</option> 
<select> 

<div id="content_1" style="display:hidden;">Content 1<div> 
<div id="content_2" style="display:hidden;">Content 2<div> 
<div id="content_3" style="display:hidden;">Content 3<div>

來源

2011-05-28 Thomas

是的。如果你顯示你到目前爲止，你可能會得到一些幫助。更明智的做法是學習Javascript和DOM的基礎知識，並學會自己編寫它，而不是依靠剪切和粘貼代碼。 – lonesomeday 2011-05-28 21:42:28

嗯，我真的只是在尋找一種技術。如果你閱讀我的問題，我不認爲我要求剪切/粘貼一段代碼，只是一種方法。 – Thomas 2011-05-28 21:45:31

該方法是在'change'事件的下拉菜單上創建一個監聽器，然後相應地更改每個'div'元素的'display'樣式屬性。 – lonesomeday 2011-05-28 21:47:21

here is a jsfiddle用顯示/經由選擇隱藏div的的一個例子。

HTML：

<div id="option1" class="group">asdf</div> 
<div id="option2" class="group">kljh</div> 
<div id="option3" class="group">zxcv</div> 
<div id="option4" class="group">qwerty</div> 
<select id="selectMe"> 
    <option value="option1">option1</option> 
    <option value="option2">option2</option> 
    <option value="option3">option3</option> 
    <option value="option4">option4</option> 
</select>

的jQuery：

$(document).ready(function() { 
    $('.group').hide(); 
    $('#option1').show(); 
    $('#selectMe').change(function() { 
    $('.group').hide(); 
    $('#'+$(this).val()).show(); 
    }) 
});

來源

2011-05-28 21:47:36

演示鏈接不起作用。你能更新它嗎？ – neophyte 2017-05-08 12:02:18

jsfiddle不起作用！返回404. BTW jquary需要任何編譯器？ – 2018-02-28 13:16:20

咩太慢。這裏是我的榜樣呢:)
http://jsfiddle.net/cqDES/

$(function() { 
    $('select').change(function() { 
     var val = $(this).val(); 
     if (val) { 
      $('div:not(#div' + val + ')').slideUp(); 
      $('#div' + val).slideDown(); 
     } else { 
      $('div').slideDown(); 
     } 
    }); 
});

來源

2011-05-28 21:49:50 Andy

可能希望隱藏加載在您小提琴上的元素。 – rybo111 2014-07-20 10:36:45

@ rybo111是的，我可以，但如果你選擇空白選項，它會再次顯示它們，所以它可能是一個功能。 – Andy 2014-07-20 14:27:32

OP在他的問題中隱藏了他們的負載，所以這是期望的效果。 – rybo111 2014-07-21 18:08:51

-1

有許多方法來執行你的任務，但最優雅的是，我相信，使用CSS。下面是基本步驟

聽力選項評選活動，伺機添加/刪除一些類容器的動作，其中包含你有興趣（例如，人體）
添加樣式隱藏所有div除了所有div一。
幹得好，先生。

如果有幾個div，這很有效，因爲你想切換更多的元素，應該寫更多的css規則。這裏是更一般的解決方案，綁定動作，基於以下步驟： 1.使用某些選擇器查找所有元素（通常它看起來像'.menu-container .menu-item'） 2.找到找到的元素之一，它是當前可見，隱藏它 3.使可見的另一個元素，你希望在新環境下可見的元素。

的JavaScript它相當timtoady語言）

來源

2011-05-28 21:52:05 shabunc

有了零的jQuery

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <style> 
.inv { 
    display: none; 
} 
    </style> 
    <body> 
     <select id="target"> 
      <option value="">Select...</option> 
      <option value="content_1">Option 1</option> 
      <option value="content_2">Option 2</option> 
      <option value="content_3">Option 3</option> 
     <select> 

     <div id="content_1" class="inv">Content 1</div> 
     <div id="content_2" class="inv">Content 2</div> 
     <div id="content_3" class="inv">Content 3</div> 

     <script> 
      document 
       .getElementById('target') 
       .addEventListener('change', function() { 
        'use strict'; 
        var vis = document.querySelector('.vis'), 
         target = document.getElementById(this.value); 
        if (vis !== null) { 
         vis.className = 'inv'; 
        } 
        if (target !== null) { 
         target.className = 'vis'; 
        } 
      }); 
     </script> 
    </body> 
</html>

來源

2014-07-20 09:59:48

接受的答案有幾個缺點：

不要在定位在JavaScript代碼標識。使用avoid repeating your code的類和數據屬性。
這是一種很好的做法，可以在加載時使用CSS進行隱藏，而不是使用JavaScript —來支持非JavaScript用戶，並防止加載時顯示 - 隱藏閃爍。

考慮到上述情況，你的選擇甚至可以有不同的值，但切換同一類：

<select class="div-toggle" data-target=".my-info-1"> 
    <option value="orange" data-show=".citrus">Orange</option> 
    <option value="lemon" data-show=".citrus">Lemon</option> 
    <option value="apple" data-show=".pome">Apple</option> 
    <option value="pear" data-show=".pome">Pear</option> 
</select> 

<div class="my-info-1"> 
    <div class="citrus hide">Citrus is...</div> 
    <div class="pome hide">A pome is...</div> 
</div>

的jQuery：

$(document).on('change', '.div-toggle', function() { 
    var target = $(this).data('target'); 
    var show = $("option:selected", this).data('show'); 
    $(target).children().addClass('hide'); 
    $(show).removeClass('hide'); 
}); 
$(document).ready(function(){ 
    $('.div-toggle').trigger('change'); 
});

CSS：

.hide { 
    display: none; 
}

這裏的a JSFiddle看到它在行動。

來源

2014-07-20 10:18:56 rybo111

爲什麼我的人似乎不工作？ http://jsfiddle.net/fuvxkzkd/ - 非常奇怪的是，我的本地站點上運行的版本確實似乎不起作用，但如果選擇另一個選項，它不會將「隱藏」類添加到選項元素，所以它只是添加到顯示的行的列表 – Lee 2015-12-15 10:25:14

@Lee如果您檢查了JavaScript控制檯，您會看到'$ is not defined'，這意味着jQuery尚未加載到您的小提琴上。在JSFiddle上，將'https：// code.jquery.com/jquery-1.11.3.js'添加到左側的外部資源。 – rybo111 2015-12-15 12:46:52

啊。哇，我覺得愚蠢，我認爲JSfiddle自動包含它。好的，那會好起來的。順便說一下，我設法讓我的本地版本也能正常工作，謝謝。 – Lee 2015-12-15 14:00:41

根據下拉菜單中的選擇更改div的內容

回答

相關問題