选择一种颜色时显示文本框并同时隐藏其他颜色
Show a text-box when selecting one color and hide other same time
我在选择第一个文本框时隐藏第二个文本框时遇到问题。反之亦然。我想我可能没有写正确的代码。
<select id = 'color2' name = 'dept' onchange = "
if ($('#color2').val() == 'others')
{
$('#color_a').show();
$('#color_b').hide();
}
else($('#color2').val() == 'blue')
{
$('#color_b').show();
$('color_a').hide();
}
">
<option value="">Select a Field</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
在顶部定义你的元素 selections 并将它们分配给一个 var,这样你就不必每次点击元素时都遍历 DOM 到 select 其他元素。
放在脚本标签里,省去很多麻烦。
(function($){
$(function(){
var select = $('#color2'),
colorA = $('#color_a'),
colorB = $('#color_b');
// hide all colors
$('.color').hide();
select.on('change', function(){
$('.color').hide();
if (select.val() == 'others'){
colorA.show();
}
else if (select.val() == 'blue') {
colorB.show();
}
});
})
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="color2" name='dept'>
<option value="">Select a Field</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<div id="color_a" class="color">Color A (others)</div>
<div id="color_b" class="color">Color B (blue)</div>
我在选择第一个文本框时隐藏第二个文本框时遇到问题。反之亦然。我想我可能没有写正确的代码。
<select id = 'color2' name = 'dept' onchange = "
if ($('#color2').val() == 'others')
{
$('#color_a').show();
$('#color_b').hide();
}
else($('#color2').val() == 'blue')
{
$('#color_b').show();
$('color_a').hide();
}
">
<option value="">Select a Field</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
在顶部定义你的元素 selections 并将它们分配给一个 var,这样你就不必每次点击元素时都遍历 DOM 到 select 其他元素。
放在脚本标签里,省去很多麻烦。
(function($){
$(function(){
var select = $('#color2'),
colorA = $('#color_a'),
colorB = $('#color_b');
// hide all colors
$('.color').hide();
select.on('change', function(){
$('.color').hide();
if (select.val() == 'others'){
colorA.show();
}
else if (select.val() == 'blue') {
colorB.show();
}
});
})
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="color2" name='dept'>
<option value="">Select a Field</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<div id="color_a" class="color">Color A (others)</div>
<div id="color_b" class="color">Color B (blue)</div>