通过form中的select控件改变DIV的显示与隐藏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过form中的select控件改变DIV的显示与隐藏相关的知识，希望对你有一定的参考价值。
一个页面 里面有很多的DIV 然后每当选择select中的一个值的时候，显示对应的一个DIV，其余的DIV隐藏。
要支持火狐的 谢谢了...
div width:100px; height:100px; background-color:#6699CC
</style>
<body>
<div id="d_1" style="display:none">d_1 div</div>
<div id="d_2" style="display:none">d_2 div</div>
<div id="d_3" style="display:none">d_3 div</div>
<select name="sel" id="sel" onchange="sel_div(this)">
<option value="请选择">请选择</option>
<option value="d_1">div1</option>
<option value="d_2">div2</option>
<option value="d_3">div3</option>
</select>
</body>
<script>
function sel_div(t)
for(var i=1;i<t.length;i++)
document.getElementById(t.options[i].value).style.display="none";
if(t.value!="请选择")
document.getElementById(t.value).style.display="block";
</script>本回答被提问者采纳
React:form
表单控件：
input
文档在介绍控件之前，先提到了react组件自身的一个特点：状态由state掌控，改变组件状态只能用setState方法。
而在html的表单里，input、radio、checkbox、select的值都是随用户输入改变的。
要创建一个React的表单控件，也就是用React的方式创建表单组件：
<label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label>
在input控件中，value值就是一个状态state.value。当用户输入完成后，通过onChange事件调用setState改变state.value的值，从而让state.value与用户输入一致。此时，input不再是一个单纯的表单元素，而是一个React组件，可以有各种用户自定义行为。这和vue的v-model倒是很一致。一个组件就是一个实例，状态变量属于实例的（私有）属性，并能单向/双向绑定。
textarea：
在html中，textarea的初始值由其文本元素定义。
在React中，用其value特性来表示。具体操作和input一样：
<textarea value={this.state.value} onChange={this.handleChange} />
select:
1 <select> 2 <option value="grapefruit">Grapefruit</option> 3 <option value="lime">Lime</option> 4 <option selected value="coconut">Coconut</option> 5 <option value="mango">Mango</option> 6 </select>
在html中，select创建下拉菜单，在option中庸selected特性预选一个option。
在React中，不适用selected特性，而是直接用value预定义某个选项的值。这使得对select的操作专注在value特性。
1 //... 2 constructor(props) { 3 super(props); 4 this.state = {value: ‘coconut‘}; 5 6 this.handleChange = this.handleChange.bind(this); 7 this.handleSubmit = this.handleSubmit.bind(this); 8 } 9 //... 10 <select value={this.state.value} onChange={this.handleChange}> 11 <option value="grapefruit">Grapefruit</option> 12 <option value="lime">Lime</option> 13 <option value="coconut">Coconut</option> 14 <option value="mango">Mango</option> 15 </select>
因此，对于input、textarea和select，我们只需要操作value即可。
处理Multiple Inputs：
文档给了一个针对多个表单控件的例程，我们可以通过判断控件的的name和type特性来处理：
1 handleInputChange(event) { 2 const target = event.target; 3 const value = target.type === ‘checkbox‘ ? target.checked : target.value; 4 const name = target.name; 5 6 this.setState({ 7 [name]: value 8 }); 9 }
此时，表单的状态就是表单的名值对，经过URI编码后可以post给后台。
另一种替代方案：
文档提到，如果我们嫌表单控件麻烦，可以用另一种形式的表单组件--Uncontrolled Components：
意思是我们不必特意给form中的表单元素写处理程序，也不需要创建state变量。我们只需要写一个针对整个表单的处理程序，在用户submit的时候调用即可。其中，表单元素的value的输入用一个ref函数捕获：
1 render() { 2 return ( 3 <form onSubmit={this.handleSubmit}> 4 <label> 5 Name: 6 <input type="text" ref={(input) => this.input = input} /> 7 </label> 8 <input type="submit" value="Submit" /> 9 </form> 10 );
另外，Uncontrolled Components形式的表单中，为了给表单元素设置初始值，有一个defaultValue特性，在表单渲染的时候显示初始值。
1 <input 2 defaultValue="Bob" 3 type="text" 4 ref={(input) => this.input = input} />
以上是关于通过form中的select控件改变DIV的显示与隐藏的主要内容，如果未能解决你的问题，请参考以下文章