如果用其中一个表单项type控制另一个表单项redis的显示与隐藏,当type的值为2时显示redis,怎么写?
时间: 2024-03-16 12:41:46 浏览: 50
使用PHP导出Redis数据到另一个Redis中的代码
可以使用JavaScript来实现表单项的显示和隐藏。具体的实现方法如下:
1. 给type表单项添加一个事件监听器,当其值改变时触发事件。
2. 在事件处理程序中,获取redis表单项的元素对象。
3. 判断type表单项的值,如果为2,则将redis表单项的display样式设置为"block",否则将其设置为"none"。
以下是具体的代码实现:
```html
<form>
<label for="type">Type:</label>
<select id="type">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<br>
<label for="redis" id="redis-label" style="display:none;">Redis:</label>
<input type="text" id="redis" style="display:none;">
</form>
<script>
const type = document.querySelector('#type');
const redis = document.querySelector('#redis');
const redisLabel = document.querySelector('#redis-label');
type.addEventListener('change', function() {
if (type.value === '2') {
redis.style.display = 'block';
redisLabel.style.display = 'block';
} else {
redis.style.display = 'none';
redisLabel.style.display = 'none';
}
});
</script>
```
在上面的代码中,我们首先获取了type和redis表单项的元素对象,并给type表单项添加了一个change事件的监听器。当type的值改变时,事件处理程序会根据其值来判断是否显示redis表单项,如果type的值为2,则将redis表单项的display样式设置为"block",否则将其设置为"none",从而实现了表单项的显示与隐藏。
阅读全文