jsp页面处理问题用jquery option 出现不同的显示

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){

$("#searchselect").on("change",function(){
var select=$(this).val();
if(select){
if('order' == select){
$("#searchselect2").show();
$("#searchselect1").hide();
$('#span1').text();
$('#span2').text();
$("#keyWordText").val("");
}else if('product'==select){
$("#searchselect1").show();
$("#searchselect2").hide();
$('#span1').text();
$('#span2').text();
$("#keyWordText").val("");
}
}else{
$("#select").hide();
}})

});
</script>
</head>
<body>
<form id="selectform">
   <select id="searchselect" >
    <option value="init">PleaseSelect</option>
    <option value="order">Order</option>
    <option value="product">Product</option>
   </select>
   <p id="searchselect1" style="display: none;">
    <input type="radio"  value="0" id="select1" />
    <span id="span1">Product CD</span>    <input type="radio"  value="1" id="select2" />     <span id="span2">Produce Name</span>    <input id="keyWordText" type="text">    <input type="button" onClick="SelectData();" value="Search"
     name="SelectData">
   </p>
   <p id="searchselect2" style="display: none;">
    <input type="radio"  value="2" id="select3" />
    <span id="span3">Order ID</span>    <input type="radio"  value="3" id="select4" />     <span id="span4">Customer CD</span>    <input id="keyWordText" type="text">     <input type="button" onClick="CustmerSearch();"
     value="Search" name="CustmerSearch">
   </p>
</form>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

感谢贴上代码但加了hide还是失败了。顺便问下，我那个search按狃实现方法的怎么一起加到判断里，或者怎么重新写一个function?
下拉选取值是这么取得
$("#searchselect option:selected").val();感觉你的脚本里边错误挺多，下拉选用过click时间更合适
不好意思，我贴个效果图你看下。。
这就是选则一个option value出来的效果，点search执行两个方法中的一个。
<!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>
    <title>使用jQuery选择器实现隔行变色</title>
    <script language="javascript" type="text/javascript"
            src="js/jquery-1.4.1.js"></script>
   <script type="text/javascript">
$(function(){

$("#searchselect option").click(function(){

if($(this).val()=="product"){

$("#searchselect1").show();
$("#searchselect2").hide();
}if($(this).val()=="order"){
$("#searchselect1").hide();
$("#searchselect2").show();
}
});
})
function searchSelect(){
}
</script>
</head>
<body><form id="selectform">
   <select id="searchselect" >
    <option value="init">PleaseSelect</option>
    <option value="order">Order</option>
    <option value="product">Product</option>
   </select>
   <p id="searchselect1" style="display: none;">
    <input type="radio"  value="0" id="select1" />
    <span id="span1">Product CD</span>    <input type="radio"  value="1" id="select2" />     <span id="span2">Produce Name</span>    <input id="keyWordText" type="text">    <input type="button" onClick="SelectData();" value="Search"
     name="SelectData">
   </p>
   <p id="searchselect2" style="display: none;">
    <input type="radio"  value="2" id="select3" />
    <span id="span3">Order ID</span>    <input type="radio“  value="3" id="select4" />     <span id="span4">Customer CD</span>    <input id="keyWordText" type="text">     <input type="button" onClick="CustmerSearch();"
     value="Search" name="CustmerSearch">
   </p>
</body>
</html>
是这样吗/.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
<form id="selectform">
<select id="searchselect">
<option value="init">
PleaseSelect
</option>
<option value="order">
Order
</option>
<option value="product">
Product
</option>
</select>
<p id="searchselect1" style="display: none;">
<input type="radio" value="0" id="select1" />
<span id="span1">
Product CD
</span>
<input type="radio" value="1" id="select2" />
<span id="span2">
Produce Name
</span>
<input id="keyWordText" type="text">

<input  type="button" value="button" onclick="fun1();" />
</p>
<p id="searchselect2" style="display: none;">
<input type="radio" value="2" id="select3" />
<span id="span3">
Order ID
</span>
<input type="radio" value="3" id="select4" />
<span id="span4">
Customer CD
</span>
<input id="keyWordText" type="text">
<input type="button" value="button" onclick="fun2();" />
</p>
<script>
$(document).ready(function() {

$("#searchselect").bind("change",
function() {
var select = $(this).val();
if (select) {
if ('order' == select) {
$("#searchselect2").show();
$("#searchselect1").hide();
$('#span1').text();
$('#span2').text();

} else if ('product' == select) {
$("#searchselect1").show();
$("#searchselect2").hide();
$('#span1').text();
$('#span2').text();

}
} else {
$("#select").hide();
}

})

});

function fun1() {

alert("fun1");

}
function fun2() {

alert("fun2");

}
</script>
</form>
</body>

</html>
太感谢了,基本ok了，但如果再选择到pleas 那个hide.失败。。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
<form id="selectform">
<select id="searchselect">
<option value="init">
PleaseSelect
</option>
<option value="order">
Order
</option>
<option value="product">
Product
</option>
</select>
<p id="searchselect1" style="display: none;">
<input type="radio" value="0" id="select1" />
<span id="span1">
Product CD
</span>
<input type="radio" value="1" id="select2" />
<span id="span2">
Produce Name
</span>
<input id="keyWordText" type="text">

<input  type="button" value="button" onclick="fun1();" />
</p>
<p id="searchselect2" style="display: none;">
<input type="radio" value="2" id="select3" />
<span id="span3">
Order ID
</span>
<input type="radio" value="3" id="select4" />
<span id="span4">
Customer CD
</span>
<input id="keyWordText" type="text">
<input type="button" value="button" onclick="fun2();" />
</p>
<script>
$(document).ready(function() { $("#searchselect").bind("change",
function() {
var select = $(this).val();
if (select) {
if ('order' == select) {
$("#searchselect2").show();
$("#searchselect1").hide();
$('#span1').text();
$('#span2').text(); } else if ('product' == select) {
$("#searchselect1").show();
$("#searchselect2").hide();
$('#span1').text();
$('#span2').text(); } else {
$("#searchselect1").hide();
$("#searchselect2").hide();
}
} }) }); function fun1() { alert("fun1"); }
function fun2() { alert("fun2"); }
</script>
</form>
</body></html>

jsp页面处理问题 用jquery option 出现不同的显示

解决方案 »

jsp页面处理问题用jquery option 出现不同的显示