<!DOCTYPE html>
<html lang="en">
<title>伪代码</title>
<head></head>
<body>
<div class="form-group">
<label class="col-md-3 control-label" for="completed">是否已经完成</label>
<div class="col-md-6">
<select name="completed" id="completed" class="form-control" onchange="showAndHide()">
<option value="1" >是</option>
<option value="0" >否</option>
</select>
</div>
</div>
<div class="form-group " id="finishDate" >
<label class="col-md-3 control-label">实际完成时间</label>
<div class="col-md-6">
<input type="text" class="form-control date date-picker" name="finishDate"/>
</div>
</div>
<div class="form-group hidden" id="reasonOfFail">
<label class="col-md-3 control-label">未完成的原因</label>
<div class="col-md-6">
<textarea name="reasonOfFail" rows="3" class="form-control"></textarea>
</div>
</div>
<div class="form-group hidden" id="dueDate">
<label class="col-md-3 control-label">计划整改完成的时间</label>
<div class="col-md-6">
<input type="text" class="form-control date date-picker" name="dueDate"/>
</div>
</div>
<div class="form-group" id="result">
<label class="col-md-3 control-label">整改成果</label>
<div class="col-md-6">
<textarea name="result" rows="3" class="form-control"></textarea>
</div>
</div>
<javascript>
function showAndHide(){
var obj = document.getElementById("completed");
var op = objS.options[obj.selectedIndex].value;
if(op =="1"){
$("#finishDate").removeClass("hidden");
$("#result").removeClass("hidden");
$("#reasonOfFail").addClass("hidden");
$("#dueDate").addClass("hidden");
}else{
$("#finishDate").addClass('hidden');
$("#result").addClass('hidden');
$("#reasonOfFail").removeClass("hidden");
$("#dueDate").removeClass("hidden");
}
}
</javascript>
</body>
</html>
分享到：
相关推荐
本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考，具体如下： 我们在用到下拉列表框select时，需要对选中的<option>选项触发事件，其实<option>本身没有触发事件方法，我们只有在select里...
以下是一个简单的示例，展示了如何通过ID找到`<select>`元素，然后设置特定`<option>`为选中状态： ```javascript // 获取select元素 var selectElement = document.getElementById('mySelect'); // 获取要设为...
当用户选择一个选项时，`<select>`的`change`事件触发，重新渲染选项以反映新的选择。 CSS样式是使这个功能美观的关键： ```css .custom-select { position: relative; display: inline-block; } .custom-...
这里使用了`option:selected`选择器来选取当前被选中的`<option>`元素，并通过`.text()`获取其文本内容。 2. **设置默认选中的下拉项**： ```javascript $('#select_id')[0].selectedIndex = 1; ``` 通过直接...
去除select当中重复的option并选中当前的option
### 如何实现在`<select>`中选择一个`<option>`后显示相关的内容 #### 场景概述 根据所提供的信息，我们面临的问题是：当用户从一个`<select>`元素中选择一个`<option>`时，希望能在页面的某个区域内显示与所选`...
js函数方法： 代码如下: [removed]... try { opts = document.getElementById(selectId).getElementsByTagName(‘option’); for (var i in opts) { if (opts[i].defaultSelected) { dom = opts[i]; break; } } } catch
### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中，`<select>` 元素是一种常见的表单控件，用于收集用户输入的选择项。它通常包含多个 `<option>` 子元素供用户选择。通过 JavaScript，我们可以实现...
复制代码代码如下: document.getElementById(“selectid”).options.length = 0; 方法二 复制代码代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码代码如下: document....
要修改 `<select>` 中的 `<option>`，可以通过获取其索引位置并赋值一个新的 `<option>` 对象来实现： ```javascript function modifyOption(selectElement, index, newText, newValue) { var newOption = new ...
在Struts2框架中，实现页面`<select>`标签默认选中的功能是非常实用且常见的需求。这不仅可以提高用户体验，还能让界面看起来更加专业。本文将详细介绍如何通过Struts2的相关标签来实现这一功能。 ### Struts2框架...
用alert（）方法显示选中的值 var prov=$("#selProvince option:selected"); var city=$("#selCity option:selected"); var dist=$("#selDistrict option:selected"); alert("省："+prov.text()+"市："+...
function CheckAll(form)根据name=chkAll的checkBox的选中与否来设置其它checkBox全选与全不选，并激活一个事件来验证表单 ...function simOptionClick4IE(form)模拟IE下点击select的option单击事件
本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要双向联动或者数据交换的场景下，是一个实用的功能。 首先，我们要了解HTML中的`<select>`元素。它是创建下拉...
标题"自定义带图标的select，只需把图标地址写在option的title属性中即可"揭示了这个插件的核心功能，即通过简单的配置就能实现带图标的下拉选项。 首先，让我们理解下拉框（`<select>`）的基本概念。在HTML中，`...
这样，我们可以通过调用`$('select').selectOption('valueToSelect')`来实现自动选中。 为了使这个插件更具灵活性，我们可以添加更多的功能，比如默认选中第一个选项或最后一个选项，甚至支持通过文本而非值来选中...
本文将深入探讨如何使用jQuery实现两个`<select>`元素之间的`<option>`选项转移操作，包括全选、单选以及删除功能。 首先，我们需要了解`<select>`和`<option>`的基本概念。`<select>`元素用于创建下拉列表，而`...
更推荐的方法是利用Ant Design Vue的`label-in-value`属性，它使得`a-select`在选中项时返回包含`value`和`label`的对象，而非单一的值。为了使`placeholder`生效，我们可以使用计算属性来处理`v-model`，确保在未...
总的来说，通过比较`option`的`value`来设置`select`的默认选中项是常见的前端开发任务，无论是静态HTML还是动态生成，都可以通过JavaScript或其他库轻松实现。在实际项目中，应考虑性能优化，避免不必要的遍历操作...