我试图创建2个选择框,其中第一个选择框的选项是固定的,但第二个选项框根据第一个div的选定值而改变。
例如: 第一选:
<select>
<option>Integers</option>
<option>Alphabets</option>
</select>
然后如果在第一个选择中选择了整数,那么我希望整数1到10作为第二个选择框中的选项。但是如果选择了字母,则a到z应该出现在第二个选择框的选项中。
答案 0 :(得分:2)
您可以创建一个包含整数和字母表的查找表对象,每个字母都有一个相关的键
然后在一个select
中使用选定的key
更新状态,在另一个select
中,您可以选择与所选key
相对应的选项。
const lookup = {
"int": [
{ id: '1', text: '1' },
{ id: '2', text: '2' },
{ id: '3', text: '3' },
{ id: '4', text: '4' },
{ id: '5', text: '5' }
],
"abc": [
{ id: 'a', text: 'a' },
{ id: 'b', text: 'b' },
{ id: 'c', text: 'c' },
{ id: 'd', text: 'd' },
{ id: 'e', text: 'e' }
]
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
dataValue: 'int'
}
}
onChange = ({ target: { value } }) => {
this.setState({ dataValue: value });
}
render() {
const { dataValue } = this.state;
const options = lookup[dataValue];
return (
<div>
<select onChange={this.onChange}>
<option value="int">Integers</option>
<option value="abc">Alphabets</option>
</select>
<hr />
<select>
{options.map(o => <option key={o.id} value={o.id}>{o.text}</option>)}
</select>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
答案 1 :(得分:0)
希望这是有帮助的
<!DOCTYPE html>
<html>
<body>
<select id="sel" onchange="ChangeList()">
<option value="">select</option>
<option value="I">Integer</option>
<option value="A">Alphabet</option>
</select>
<select id="type"></select>
<script>
var IntandAlph = {};
IntandAlph['I'] = ['1', '2', '3','4','5','6','7','8','9','10'];
IntandAlph['A'] = ['A', 'B', 'C', 'D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
function ChangeList() {
var selList = document.getElementById("sel");
var typeList = document.getElementById("type");
var seltype = selList.options[selList.selectedIndex].value;
while (typeList.options.length) {
typeList.remove(0);
}
var Num = IntandAlph[seltype];
if (Num) {
var i;
for (i = 0; i < Num.length; i++) {
var sel = new Option(Num[i], i);
typeList.options.add(sel);
}
}
}
</script>
</body>
</html>