显示/隐藏文本框
Show/Hide a text box
>我有这个代码,如果我从下拉列表中选择一个类别,则显示/隐藏文本框。它工作正常,但我想要的是,如果有人选择不同的类别,那么文本框就会消失或被另一个文本框替换。例如:如果我选择食物,则会出现一个文本框,如果我选择其他类别,则上一个文本框会再次隐藏而不会刷新整个页面。 到目前为止,我得到了什么:
<script language="javascript" type="text/javascript">
function addSubject(){
selectedSubject = document.getElementById('category').value
if (selectedSubject == 'food'){
document.getElementById('box').style.display = 'block';
}
}
</script>
<?
include ('connect.php');
$query="SELECT id, name FROM category ";
$result=mysql_query($query);
?>
<form>
<select name="category" id="category" onchange="addSubject()">
<option>Select Category</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<option value=<?php echo $row['id']?>><?php echo $row['name']?></option>
<?php } ?>
</select>
<div class="box" id="box" style="display: none;">
<div>
<span>Title :</span><input type="text" name="text" size="8" maxlength="7" />
</div>
</div>
</form>
喜欢总是提前感谢
你有像
jquery这样的库吗? 如果是这样,您可以执行以下操作:
jQuery('#box').replaceWith('<newelement>')
请参阅他们的文档:http://api.jquery.com/replaceWith/
如果我正确理解您的问题,您可以使用这样的函数:
// Expects your SELECT element as EL
function addSubject( el ){
// Gets current selected value, as well as all DIVs
var newValu = el.value,
kiddies = document.getElementById("options").childNodes,
klength = kiddies.length, curNode;
// Counts through all childNodes of the DIV container
while ( klength-- ) {
curNode = kiddies[klength];
// If the current node is a DIV (avoid text nodes )
if( curNode.nodeName == "DIV" )
// If the current node id equals our selected value, show the node
curNode.style.display = curNode.id == newValu ? "block" : "none" ;
}
}
这要求您将div
元素包装在容器中,并将this
传递到onchange
函数调用中:
<select onchange="addSubject(this)">
<option>Box</option>
<option>Food</option>
<option>Stack</option>
</select>
<div id="options">
<div id="Box">Box: <input type="text" /></div>
<div id="Food">Food: <input type="text" /></div>
<div id="Stack">Stack: <input type="text" /></div>
</div>
演示:http://jsfiddle.net/8nFCB/
相关文章:
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- 如何使用javascript隐藏文本
- 在显示/隐藏中单击时删除的文本
- 通过ng-if设置隐藏文本框的值
- Codemirror:将特定的基于模式的文本隐藏到编辑器中
- 使文本在它之后再次可见'It’s被一个按钮隐藏了
- 移动HTML输入文本框在提交时隐藏软键盘
- 只隐藏那些为空或没有文本的跨度
- Selenium认为文本框是隐藏的,即使我可以在浏览器中看到它
- 如何根据文本长度立即显示和隐藏字段?-JQuery
- Jquery日期选择器-我们如何将文本隐藏在日期选择器文本框中
- 使用 JS 将文本隐藏在元素中(而不是元素本身)
- 如何使一个文本隐藏另一个文本
- JQuery显示隐藏与无序列表:需要添加动态文本/隐藏功能
- 基于文本隐藏面板
- Span文本隐藏的动画DIV尽管z索引
- 为什么幻灯片面板打开时标题文本隐藏
- Javascript:切换纯文本隐藏它像密码文本点击按钮
- 当到达底部页面部分时,Jquery用锚文本隐藏Div
- Javascript,使多个文本隐藏文本输入可见