有时,选择select某项时,要显示一个文本说明,不同的选项出现不同的文本说明,可用jquery实现。
$(document).ready(
function(){selectval();});
function selectval()
{
$( "select").change( function(){
function selectval()
{
$( "select").change( function(){
$(".ii").remove();
var t=$( this).children( "[@selected]").html();
var a=['111','222','333'];
var b='';
$.each(a, function(){
if(t!= this){b=b+ this+'<br>'}
});
$( "select").after('<div class="ii">'+b+'</div>');
});
}
var t=$( this).children( "[@selected]").html();
var a=['111','222','333'];
var b='';
$.each(a, function(){
if(t!= this){b=b+ this+'<br>'}
});
$( "select").after('<div class="ii">'+b+'</div>');
});
}
<
div
>
< select >
< option value ="aa" >111 </option>
< option value ="bb" >222 </option>
< option value ="cc" >333 </option>
</select>
</div>
< select >
< option value ="aa" >111 </option>
< option value ="bb" >222 </option>
< option value ="cc" >333 </option>
</select>
</div>
当然还有这种情况~!
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
< head runat ="server" >
< title >无标题页 </title>
< . type ="text/." src ="../JS/jquery.js" > </.>
< . language =. >
$(document).ready(function(){selectval();});
function selectval(){
$("#dis").change(function(){
$('.1').hide();
$('.2').hide();
var s=$(this).children("[@selected]").html();
var c=$(this).children("[@selected]").val();
var a=['aaaaa','bbbbb','cccc'];
var b='';
$.each(a,function(){if(this!=s){
$('.'+c).show();
}});
})
}
</.>
</head>
< body >
< form id ="form1" runat ="server" >
< div id ="content" class ="test" >
< h1 >
test </h1>
< table class ="bd_cmn_style" >
< tbody >
< tr class ="1" style ="display: none" >
< td >
aaaaaaa </td>
< td >
bbbbbbb </td>
</tr>
< tr class ="2" style ="display: none" >
< td >
ccccccc </td>
</tr>
< tr >
< td >
显示隐藏
< select id ="dis" >
< option value ="1" >aaaaa </option>
< option value ="2" >bbbbb </option>
< option value ="3" >cccc </option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
< head runat ="server" >
< title >无标题页 </title>
< . type ="text/." src ="../JS/jquery.js" > </.>
< . language =. >
$(document).ready(function(){selectval();});
function selectval(){
$("#dis").change(function(){
$('.1').hide();
$('.2').hide();
var s=$(this).children("[@selected]").html();
var c=$(this).children("[@selected]").val();
var a=['aaaaa','bbbbb','cccc'];
var b='';
$.each(a,function(){if(this!=s){
$('.'+c).show();
}});
})
}
</.>
</head>
< body >
< form id ="form1" runat ="server" >
< div id ="content" class ="test" >
< h1 >
test </h1>
< table class ="bd_cmn_style" >
< tbody >
< tr class ="1" style ="display: none" >
< td >
aaaaaaa </td>
< td >
bbbbbbb </td>
</tr>
< tr class ="2" style ="display: none" >
< td >
ccccccc </td>
</tr>
< tr >
< td >
显示隐藏
< select id ="dis" >
< option value ="1" >aaaaa </option>
< option value ="2" >bbbbb </option>
< option value ="3" >cccc </option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
转载于:https://blog.51cto.com/opper/125185