问问题
10392 次
8 回答
4
尝试这个 :
$("#category").on('change',function (
$("div.food").hide( );
var _lower=$(this).val();
var _value=_lower.charAt(0).toUpperCase() + _lower.slice(1); //just noticed that there is a uppercase char there...
$("#div"+_value).show()
)});
ps 我不知道所有这些 FOOD div 是否默认隐藏,但如果不是这样添加:
(通过CSS)
div.food
{
display:none;
}
(或通过 Js)
$("div.food").hide();
于 2013-08-06T06:00:08.423 回答
3
给你
$('#category').change(function () {
// Get the value of the dropdown
var value = this.value;
// Convert the first char to uppercase
value = value.substr(0,1).toUpperCase() + value.substr(1, value.length);
// Hide all food divs
$('.food').hide();
$('#div'+ value).show();
});
于 2013-08-06T06:03:38.340 回答
1
你可以使用这个:
$('#category').on('change', function () {
$('div.food').hide();
var val = $('#category option:selected').text();
console.log(val);
$('#div' + val).show();
});
HTML
<div id="divPie" class="food">
<p>this is pie</p>
</div>
<div id="divCake" class="food">
<p>this is cake</p>
</div>
<div id="divCandy" class="food">
<p>this is candy</p>
</div>
我在您的 div/html 中添加了 CSS,以便它们隐藏在页面加载中。
div.food
{
display:none;
}
或通过 jQuery$('div.food').hide();
于 2013-08-06T06:00:29.050 回答
0
<select id="category">
<option value="" disabled="disabled" selected="selected" onchange="hideshow(this)">Please select a category</option>
<option name="choice1" value="divPie"> Pie </option>
<option name="choice2" value="divCake"> Cake </option>
<option name="choice2" value="divCake"> Candy </option>
</select>
所有 div 隐藏,因为当用户选择元素时,div 将显示
<div id="divPie" class="food" style="display:none">
<p> this is pie </p>
</div>
<div id="divCake" class="food" style="display:none">
<p> this is pie </p>
</div>
<div id="divCandy" class="food" style="display:none">
<p> this is pie </p>
</div>
这是当用户从 div 中选择值时显示 div 的 javascript 代码
<script>
function hideshow(divval)
{
$("#"+divval).show();
}
</script>
如果您有任何问题,请告诉我这是未经测试的脚本,但我认为这可行
于 2013-08-06T06:03:00.087 回答
0
HTML
<select id="category">
<option value="" disabled="disabled" selected="selected">Please select a category</option>
<option name="choice1" value="pie"> Pie </option>
<option name="choice2" value="cake"> Cake </option>
<option name="choice2" value="candy"> Candy </option>
</select>
<div id="divpie" class="food">
<p> this is pie </p>
</div>
<div id="divcake" class="food">
<p> this is cake </p>
</div>
<div id="divcandy" class="food">
<p> this is candy </p>
</div>
JS
$(function(){
$(".food").hide();
$("#category").change(function(){
$(".food").hide();
$("#div" + $(this).val()).show();
});
});
看看它的实际效果:
于 2013-08-06T06:03:39.683 回答
0
在选择框上放置一个更改处理程序并隐藏food
除选定的之外的所有内容:
$('#category').change(function(){
switch ($(this).val())
{
var div;
case 'pie':
div = 'divPie';
break;
case 'cake':
div = 'divCake';
break;
case 'candy':
div = 'divCandy';
break;
$('.food').hide();
$(div).show();
}
});
于 2013-08-06T06:03:59.513 回答
0
我假设你正在寻找这样的东西。
<select id='category'>
<option value='test1'>Test 1</option>
<option value='test2'>Test 2</option>
</select>
<div id='test1'>
Content Here
</div>
<div id='test2'>
Content Here
</div>
你可能可以做这样的事情。
//Hide All Divs
$('div').hide();
//Get the Currently Selected Item
var selected = $('#category').val();
//Show the selected one.
$('#'+selected).show();
于 2013-08-06T06:04:47.797 回答
0
尝试这个:
HTML:
<select id="category" onchange='display();'>
<option value="" disabled="disabled" selected="selected">Please select a category</option>
<option name="choice1" value="pie">Pie</option>
<option name="choice2" value="cake">Cake</option>
<option name="choice2" value="candy">Candy</option>
</select>
<div id="divPie" class="food" style="display:none;">
<p>this is pie</p>
</div>
<div id="divCake" class="food" style="display:none;">
<p>this is cake</p>
</div>
<div id="divCandy" class="food" style="display:none;">
<p>this is candy</p>
</div>
jQuery:
function display(){
var select=$('#category').val();
if(select!=''){
var divblock='div'+select;
$(".food").hide();
$('#'+divblock).css('display','block');
}
}
您也可以使用$('#'+divblock).show();
而不是 $('#'+divblock).css('display','block');
于 2013-08-06T06:11:42.250 回答