87,955
社区成员
发帖
与我相关
我的任务
分享用JS怎么实现？
<select name="searchKt.select" id="select">
<option value="0">
请选择查询方式
</option>
<option value="depatment">
仅按部门名称
</option>
<option value="reimbursed">
仅按立项年度
</option>
<option value="reimname">
按立项年度和成员姓名
</option>
<option value="reimdept">
按立项年度和部门名称
</option>
<option value="year">
仅按结题年度
</option>
<option value="yearname">
按结题年度和成员姓名
</option>
<option value="yeardept">
按结题年度和部门名称
</option>
<option value="name">
仅按成员姓名
</option>
</select>
<br/>
<font size="2">立项年度:</font>
<input name="searchKt.time1" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font size="2">至:</font>
<input name="searchKt.time2" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font size="2">成员姓名:</font>
<input type="text" name="searchKt.name">
<font size="2">部门:</font>
<input type="text" name="searchKt.deptName">
<input type="submit" name="submit" value="查询">
我的要求很简单：
选择：
仅按立项年度查询 则 “成员姓名”，“至”和“部门”那里变灰，不可以编辑，
仅按成员姓名 则 “立项年度”和“至“ 后的输入框变灰，“部门”不可以编辑
仅按部门名称 则除“部门”可以编辑，其实都变灰，不可以编辑
仅按立项年度查询和成员姓名 则 只有“部门”变灰
仅按立项年度查询和部门名称 则 只有“成员”变灰
。。。
。。。
我想我的意思大家明白吧。
因为要马上完成，没办法，让我自己写，要写好久。哎。
所以希望让大家帮个帮！！！！
谢谢啊
...全文
请发表友善的回复…
发表回复
zhyzdl 2009-12-31
- 打赏
- 举报
study
Inpool 2009-12-30
- 打赏
- 举报
<html>
<head>
<title>test</title>
<script type="text/javascript">
var selectToInput = {
depatment:"searchKt.deptName",
reimbursed:"searchKt.time1",
reimname:"searchKt.time1 searchKt.name",
reimdept:"searchKt.time1 searchKt.deptName",
year:"searchKt.time2",
yearname:"searchKt.time2 searchKt.name",
yeardept:"searchKt.time2 searchKt.deptName",
name:"searchKt.name"
};
function setInput(obj){
var inputs = selectToInput[obj.options[obj.selectedIndex].value].split(" ");
var allInput = document.getElementsByTagName("input");
for (var index in allInput){
if (/^searchKt.*$/.test(allInput[index].id)){ //不用input.type != "submit" ，因为页面内可能还有其它的input元素
allInput[index].disabled = "true";
}
}
for(var index in inputs){
document.getElementById(inputs[index]).removeAttribute('disabled');
}
};
</script>
</head>
<body>
<select name="searchKt.select" id="select" onchange="setInput(this);">
<option value="0">请选择查询方式</option>
<option value="depatment"> 仅按部门名称 </option>
<option value="reimbursed"> 仅按立项年度 </option>
<option value="reimname"> 按立项年度和成员姓名 </option>
<option value="reimdept"> 按立项年度和部门名称 </option>
<option value="year"> 仅按结题年度 </option>
<option value="yearname"> 按结题年度和成员姓名 </option>
<option value="yeardept"> 按结题年度和部门名称 </option>
<option value="name"> 仅按成员姓名 </option>
</select> <br/>
<font size="2">立项年度:</font><input id="searchKt.time1" name="searchKt.time1" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font size="2">至:</font> <input id="searchKt.time2" name="searchKt.time2" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font size="2">成员姓名:</font> <input type="text" id="searchKt.name" name="searchKt.name">
<font size="2">部门:</font> <input type="text" id="searchKt.deptName" name="searchKt.deptName"> <input type="submit" name="submit" value="查询">
</body>
</html>
antony1029 2009-12-30
- 打赏
- 举报
[Quote=引用 4 楼 xmliy 的回复:]
HTML code<selectname="searchKt.select" id="select"><optionvalue="0">
请选择查询方式</option><optionvalue="depatment">
仅按部门名称</option><optionvalue="reimbursed">
仅按立项年度</option><optionvalue="reimname">
按立项年度和成员姓名</option><optionvalue="reimdept">
按立项年度和部门名称</option><optionvalue="year">
仅按结题年度</option><optionvalue="yearname">
按结题年度和成员姓名</option><optionvalue="yeardept">
按结题年度和部门名称</option><optionvalue="name">
仅按成员姓名</option></select><br/><fontid="lixiang" size="2">立项年度:</font><inputname="searchKt.time1" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/><fontid="to" size="2">至:</font><inputid="searchKt.time2" name="searchKt.time2" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/><fontid="chenyuan" size="2">成员姓名:</font><inputtype="text" id="searchKt.name" name="searchKt.name"><fontid="bumen" size="2">部门:</font><inputtype="text" id="searchKt.deptName" name="searchKt.deptName"><inputtype="submit" name="submit" value="查询">
JScript codevar $=function(element) {var result= [];if (!$.isArray(element)) element= [element];for (var i=0, count= element.length; i< count; i++) {
result.push(document.getElementById(element[i]));
}return fn.extend(result, fn);
}
$.isArray=function(object) {return object!=null&&typeof object=="object"&&'splice'in object&&'join'in object;
}var fn= $.prototype=
{
extend:function(dest, source) {for (var iin source) dest[i]= source[i];return dest;
},
invalid:function() {for (var i=0, count=this.length; i< count; i++) {this[i].style.color='#cccccc';this[i].disabled=true;
}returnthis;
}
}
$('select')[0].onchange=function() {switch ($('select')[0].value) {case'reimbursed':
$(['chenyuan','to','bumen','searchKt.time2','searchKt.name','searchKt.deptName']).invalid();break;case ....
.....
以此类推
}
}
[/Quote]
扩展的不错。代码规范。学习了！赞个！
HTML code<selectname="searchKt.select" id="select"><optionvalue="0">
请选择查询方式</option><optionvalue="depatment">
仅按部门名称</option><optionvalue="reimbursed">
仅按立项年度</option><optionvalue="reimname">
按立项年度和成员姓名</option><optionvalue="reimdept">
按立项年度和部门名称</option><optionvalue="year">
仅按结题年度</option><optionvalue="yearname">
按结题年度和成员姓名</option><optionvalue="yeardept">
按结题年度和部门名称</option><optionvalue="name">
仅按成员姓名</option></select><br/><fontid="lixiang" size="2">立项年度:</font><inputname="searchKt.time1" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/><fontid="to" size="2">至:</font><inputid="searchKt.time2" name="searchKt.time2" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/><fontid="chenyuan" size="2">成员姓名:</font><inputtype="text" id="searchKt.name" name="searchKt.name"><fontid="bumen" size="2">部门:</font><inputtype="text" id="searchKt.deptName" name="searchKt.deptName"><inputtype="submit" name="submit" value="查询">
JScript codevar $=function(element) {var result= [];if (!$.isArray(element)) element= [element];for (var i=0, count= element.length; i< count; i++) {
result.push(document.getElementById(element[i]));
}return fn.extend(result, fn);
}
$.isArray=function(object) {return object!=null&&typeof object=="object"&&'splice'in object&&'join'in object;
}var fn= $.prototype=
{
extend:function(dest, source) {for (var iin source) dest[i]= source[i];return dest;
},
invalid:function() {for (var i=0, count=this.length; i< count; i++) {this[i].style.color='#cccccc';this[i].disabled=true;
}returnthis;
}
}
$('select')[0].onchange=function() {switch ($('select')[0].value) {case'reimbursed':
$(['chenyuan','to','bumen','searchKt.time2','searchKt.name','searchKt.deptName']).invalid();break;case ....
.....
以此类推
}
}
[/Quote]
扩展的不错。代码规范。学习了！赞个！
xmliy 2009-12-30
- 打赏
- 举报
稍做修改
var $ = function(element) {
var result = [];
if (!$.isArray(element)) element = [element];
for (var i = 0, count = element.length; i < count; i++) {
result.push(document.getElementById(element[i]));
}
return fn.extend(result, fn);
}
$.isArray = function(object) {
return object != null && typeof object == "object" &&
'splice' in object && 'join' in object;
}
var fn = $.prototype =
{
extend: function(dest, source) {
for (var i in source) dest[i] = source[i];
return dest;
},
enabled: function(isEnabled) {
for (var i = 0, count = this.length; i < count; i++) {
this[i].style.color = isEnabled ? '' : '#cccccc';
this[i].disabled = !isEnabled;
}
return this;
}
}
$('select')[0].onchange = function() {
$(['chenyuan', 'to', 'bumen', 'searchKt.time2', 'searchKt.name', 'searchKt.deptName']).enabled(true);
switch ($('select')[0].value) {
case 'reimbursed':
$(['chenyuan', 'to', 'bumen', 'searchKt.time2', 'searchKt.name', 'searchKt.deptName']).enabled(false);
break;
}
}
antony1029 2009-12-30
- 打赏
- 举报
再简化一点
$(document).ready(function()
{
$("#select").change(function(){
if(this.value=="depatment")
{
//设置textbox样式是否readonly；
}
});
});
$(document).ready(function()
{
$("#select").change(function(){
if(this.value=="depatment")
{
//设置textbox样式是否readonly；
}
});
});
xmliy 2009-12-30
- 打赏
- 举报
<select name="searchKt.select" id="select">
<option value="0">
请选择查询方式
</option>
<option value="depatment">
仅按部门名称
</option>
<option value="reimbursed">
仅按立项年度
</option>
<option value="reimname">
按立项年度和成员姓名
</option>
<option value="reimdept">
按立项年度和部门名称
</option>
<option value="year">
仅按结题年度
</option>
<option value="yearname">
按结题年度和成员姓名
</option>
<option value="yeardept">
按结题年度和部门名称
</option>
<option value="name">
仅按成员姓名
</option>
</select>
<br/>
<font id="lixiang" size="2">立项年度:</font>
<input name="searchKt.time1" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font id="to" size="2">至:</font>
<input id="searchKt.time2" name="searchKt.time2" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font id="chenyuan" size="2">成员姓名:</font>
<input type="text" id="searchKt.name" name="searchKt.name">
<font id="bumen" size="2">部门:</font>
<input type="text" id="searchKt.deptName" name="searchKt.deptName">
<input type="submit" name="submit" value="查询">
var $ = function(element) {
var result = [];
if (!$.isArray(element)) element = [element];
for (var i = 0, count = element.length; i < count; i++) {
result.push(document.getElementById(element[i]));
}
return fn.extend(result, fn);
}
$.isArray = function(object) {
return object != null && typeof object == "object" &&
'splice' in object && 'join' in object;
}
var fn = $.prototype =
{
extend: function(dest, source) {
for (var i in source) dest[i] = source[i];
return dest;
},
invalid: function() {
for (var i = 0, count = this.length; i < count; i++) {
this[i].style.color = '#cccccc';
this[i].disabled = true;
}
return this;
}
}
$('select')[0].onchange = function() {
switch ($('select')[0].value) {
case 'reimbursed':
$(['chenyuan', 'to', 'bumen', 'searchKt.time2', 'searchKt.name', 'searchKt.deptName']).invalid();
break;
case ....
.....
以此类推
}
}
antony1029 2009-12-30
- 打赏
- 举报
用jquery的。
$(document).ready(function()
{
$("#select").change(function(){
jQuery('option:selected', this).each(function(){ //印出選到多個值
alert(this.value);
if(this.value=="depatment")
{
//设置textbox样式是否readonly；
}
});
});
});
$(document).ready(function()
{
$("#select").change(function(){
jQuery('option:selected', this).each(function(){ //印出選到多個值
alert(this.value);
if(this.value=="depatment")
{
//设置textbox样式是否readonly；
}
});
});
});
sundotLei 2009-12-30
- 打赏
- 举报
看你描述的有点晕，给你写个简单的例子，原理一样.
<SCRIPT LANGUAGE="JavaScript">
<!--
function a(v){
if(v=="A"){
document.form1.aa.disabled=false;
document.form1.bb.disabled=true;
}
if(v=="B"){
document.form1.aa.disabled=true;
document.form1.bb.disabled=false;
}
//多个if可以使用switch
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="form1">
<select name="searchKt.select" id="select" onchange="a(this.options[this.selectedIndex].value)">
<option value="0">
请选择查询方式
</option>
<option value="A">
A
</option>
<option value="B">
B
</option>
</select>
<br/>
A: <input name="aa" type="text" size="25"/><br/>
B: <input name="bb" type="text" size="25"/><br/>
</form>
</BODY>
东大坡居士 2009-12-30
- 打赏
- 举报
<select> 在其中添加onchange事件,如onchange = "set()",
将你写的<font size="2">立项年度:</font>
<input name="searchKt.time1" type="text" size="25" readonly="
等都放到div里,在function set里面判断select框的内容,然后设置相应的div为disable
将你写的<font size="2">立项年度:</font>
<input name="searchKt.time1" type="text" size="25" readonly="
等都放到div里,在function set里面判断select框的内容,然后设置相应的div为disable
