切換DIV選擇

下面的代碼是什麼我一起工作：切換DIV選擇

<select id="tables" multiple="multiple" name="tables[]"> 
     <option>users</option> 
     <option>options</option> 
     <option>posts</option> 
</select> 

<div id="something" style="hidden">Stuff goes here.</div>

我所試圖做的是當在下拉列表中選擇一個具體選項有一個div切換。例如，如果只選擇'選項'選項，則div顯示。取消選中，它將被刪除。

來源

2011-10-23 mousesports

工作SOLUT離子：http://jsfiddle.net/uA7XD/

JS：

window.changeHandler = function() { 
    var op = $("#tables option[value='options']:selected"); 
    if (op.length) 
     $("#something").show(); 
    else 
     $("#something").hide(); 
}

HTML：

<select id="tables" multiple="multiple" name="tables[]" onchange="changeHandler()"> 
     <option>users</option> 
     <option>options</option> 
     <option>posts</option> 
</select> 

<div id="something" class="hidden">Stuff goes here.</div>

CSS：

.hidden { 
    display:none; 
}

來源

2011-10-23 15:20:15

試過了 - 效果很棒:)謝謝。 – mousesports

您可以使用：'$（「＃something」）來代替'if（op.length）'和雙重調用'.show（）'和'.hide（）'toggle（op.length > 0）'或全部在一行中：'$（「＃something」）。toggle（$（「＃tables option [value ='options']：selected」）。length> 0））;' – jfriend00

@ jfriend00是的，這是完全有效的，但他可能想要使用不同的效果或執行一些操作。 –

$('#tables').change(function(e){ 
    $('#something').toggle($(this).val() == 'options'); 
});

上進行選擇的變化，顯示/隱藏DIV如果所選選項的值等於「選項」

更新爲多選：

$('#tables').change(function(e){ 
    $('#something').toggle($('option[value="options"]:selected',this).length > 0); 
});

更新演示： http://jsfiddle.net/NXHnp/1/

來源

2011-10-23 15:12:15

演示可以在這裏找到：http://jsfiddle.net/NXHnp/ –

thx爲我介紹jsfiddle ...真棒應用程序！：D – Ryan

感謝布拉德 - 我已經實現了類似的變化事件，但似乎沒有正常工作。但是，您的代碼有一個問題。如果選擇了多個選項（比如用戶和選項），div將不會切換。 – mousesports

$('#tables').live('click', function(){ 
    if($('#tables').val() == 'options') 
     $('#something').slideDown(); 
    else 
     $('#something').slideUp(); 
    });

來源

2011-10-23 15:15:07 Dev

回答

相關問題