jquery select 问题 - ITeye问答

0 0

jquery select 问题5

<tr>
<td>
<select name="a" class="xx_select" id="a" onchange="changeA();">
<option value="" selected="selected">请选择</option>
<option value="mmm" >测试1</option>
<option value="nnn" >测试2</option>
<td>
<td>
<input type="text" id="mmm" name="mmm" class="xx_input" style="display: none" /> 
<input type="text" id="nnn" name="nnn" class="xx_input" style="display: none" /> 
</td>
</tr>

切换测试1和测试2的时候，会对应显示的文本框。选“请选择”的时候不显示任何文本框，用jquery怎么实现？
求解决。。。。

问题补充：少个“/”，一个tr里两个td

2012年12月14日 22:42

llchen
1
0 0 3

采纳的答案

针对你的新问题：
【有没有更好些的方法呢？假如有测试1、测试2、……测试10，同样切换绑定对应的input该怎么实现呢？】
下次提问的时候记得如果有新问题直接追加在原问题上，不要追加在回答者留言上，这样别人看不到的。。。
这个简单了。要确保你select 中的value 就是你要显示的input的id
例如：

<select name="a" class="xx_select" id="a" onchange="changeA();">  
<option value="" selected="selected">请选择</option>  
<option value="mmm" >测试1</option>  
<option value="nnn" >测试2</option>   
<option value="nnn1" >测试3</option>
</select>
<input type="text" id="mmm" name="mmm" class="xx_input" style="display: none" />   
<input type="text" id="nnn" name="nnn" class="xx_input" style="display: none" />   
<input type="text" id="nnn1" name="nnn1" class="xx_inpt" style="display: none" /

>
注意看了测试3的value和input 中有一个id=nnn1的一样，那么这样的话就有办法进行优化了

$(document).ready(function(){
$(".xx_select").change(function()
{
var selectValue= $('select[name="a"]').val();
if(selectValue=="")
{
//其中根据class xx_input 的来标识是你要控制的，如果页面中有多个与这个无关的 input 但class 也是 xx_input 可以新建一个class 但样式属性和 xx_input 的一样就可以了，但className名字不一样就可以了
$(".xx_input").hide();
}else
{
$(".xx_input").hide();
$("#"+selectValue).show();
}
});
});

2012年12月15日 13:24

demojava
2207
1 3 134

添加评论

1 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#a").change(function() {
			for(var i = 0; i < $('#a option').length; i ++) {
				$("#test" + i).hide();
				if($("#a").get(0).selectedIndex) {
					$("#test" + $("#a").get(0).selectedIndex).show();	
				}
			}	
		}); 
	});
</script>
</head>

<body>
	<table>
    	<tr>  
			<td>  
				<select name="a" class="xx_select" id="a">  
					<option value="" selected="selected">请选择</option>  
					<option value="test1" >测试1</option>  
					<option value="test2" >测试2</option> 
				</select> 
			</td>  
			<td>  
				<input type="text" id="test1" name="test1" class="xx_input" style="display: none" value="test1"/>   
				<input type="text" id="test2" name="test2" class="xx_input" style="display: none" value="test2"/>   
			</td>  
		</tr>
    </table>
</body>
</html>

2012年12月15日 00:31

henghanan
494
0 0 32

添加评论

0 0

凡是google 一搜一大把的，建议先问google.

2012年12月15日 13:33

freezingsky
159
1 1 16

添加评论

0 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#a").change(function() {
			if($("#a").val() == "mmm") {
				$("#mmm").show();
				$("#nnn").hide();
			} else if($("#a").val() == "nnn") {
				$("#nnn").show();
				$("#mmm").hide();
			} else {
				$("#mmm").hide();
				$("#nnn").hide();
			}
		}); 
	});
</script>
</head>

<body>
	<table>
    	<tr>  
			<td>  
				<select name="a" class="xx_select" id="a">  
					<option value="" selected="selected">请选择</option>  
					<option value="mmm" >测试1</option>  
					<option value="nnn" >测试2</option> 
				</select> 
			</td>  
			<td>  
				<input type="text" id="mmm" name="mmm" class="xx_input" style="display: none" value="mmm"/>   
				<input type="text" id="nnn" name="nnn" class="xx_input" style="display: none" value="nnn"/>   
			</td>  
		</tr>
    </table>
</body>
</html>

2012年12月14日 23:17

henghanan
494
0 0 32

2条评论

0 0

$(document).ready(function(){
$(".xx_select").change(function()
{
var cc2 = $('select[@name="a"]').val(); 
if(cc2=="")
{
$("#mmm").hide();
$("#nnn").hide();
}else if(cc2=="mmm")
{
$("#mmm").show();
$("#nnn").hide();
}
else if(cc2=="nnn")
{
$("#nnn").show();
$("#mmm").hide();
}

})
});

2012年12月14日 23:04

demojava
2207
1 3 134

1条评论

已解决问题

未解决问题

排行榜

查看全部排名>>

jquery select 问题5

5个答案按时间排序按投票排序

采纳的答案

相关推荐

相关推荐

已解决问题

未解决问题

排行榜

jquery select 问题5

5个答案 按时间排序 按投票排序

采纳的答案

相关推荐

相关推荐

已解决问题

未解决问题

排行榜

5个答案按时间排序按投票排序