`
大犇犇
  • 浏览: 954 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

select实现option选中事件

selectoption选中事件onchange 
阅读更多
<!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触发事件操作示例

    本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考，具体如下： 我们在用到下拉列表框select时，需要对选中的&lt;option&gt;选项触发事件，其实&lt;option&gt;本身没有触发事件方法，我们只有在select里...

    select将选中的option设置为默认选项

    以下是一个简单的示例，展示了如何通过ID找到`&lt;select&gt;`元素，然后设置特定`&lt;option&gt;`为选中状态： ```javascript // 获取select元素 var selectElement = document.getElementById('mySelect'); // 获取要设为...

    select option带自定义图片

    当用户选择一个选项时，`&lt;select&gt;`的`change`事件触发，重新渲染选项以反映新的选择。 CSS样式是使这个功能美观的关键： ```css .custom-select { position: relative; display: inline-block; } .custom-...

    jquery获得select option值

    这里使用了`option:selected`选择器来选取当前被选中的`&lt;option&gt;`元素，并通过`.text()`获取其文本内容。 2. **设置默认选中的下拉项**： ```javascript $('#select_id')[0].selectedIndex = 1; ``` 通过直接...

    Select去重并选中当前option.txt

    去除select当中重复的option并选中当前的option

    页select中如何实现选择option其中一个选项，显示相关的内容

    ### 如何实现在`&lt;select&gt;`中选择一个`&lt;option&gt;`后显示相关的内容 #### 场景概述 根据所提供的信息，我们面临的问题是：当用户从一个`&lt;select&gt;`元素中选择一个`&lt;option&gt;`时，希望能在页面的某个区域内显示与所选`...

    js获取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

    struts2实现页面select标签默认选中

    在Struts2框架中，实现页面`&lt;select&gt;`标签默认选中的功能是非常实用且常见的需求。这不仅可以提高用户体验，还能让界面看起来更加专业。本文将详细介绍如何通过Struts2的相关标签来实现这一功能。 ### Struts2框架...

    js 操作select和option

    ### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中，`&lt;select&gt;` 元素是一种常见的表单控件，用于收集用户输入的选择项。它通常包含多个 `&lt;option&gt;` 子元素供用户选择。通过 JavaScript，我们可以实现...

    javascript_select_option_操作详解.txt

    要修改 `&lt;select&gt;` 中的 `&lt;option&gt;`，可以通过获取其索引位置并赋值一个新的 `&lt;option&gt;` 对象来实现： ```javascript function modifyOption(selectElement, index, newText, newValue) { var newOption = new ...

    清空select标签中option选项的3种不同方式

    复制代码代码如下: document.getElementById(“selectid”).options.length = 0; 方法二 复制代码代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码代码如下: document....

    页面如何获取select框选中值（实例）

    用alert（）方法显示选中的值 var prov=$("#selProvince option:selected"); var city=$("#selCity option:selected"); var dist=$("#selDistrict option:selected"); alert("省："+prov.text()+"市："+...

    checkbox全选与全不选 xml解析导入与导出 IE下点击select的option单击事件

    function CheckAll(form)根据name=chkAll的checkBox的选中与否来设置其它checkBox全选与全不选，并激活一个事件来验证表单 ...function simOptionClick4IE(form)模拟IE下点击select的option单击事件

    option的value比较来确定select默认选中项

    总的来说，通过比较`option`的`value`来设置`select`的默认选中项是常见的前端开发任务，无论是静态HTML还是动态生成，都可以通过JavaScript或其他库轻松实现。在实际项目中，应考虑性能优化，避免不必要的遍历操作...

    jquery select 选中值设置左右select选择互换

    本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要双向联动或者数据交换的场景下，是一个实用的功能。 首先，我们要了解HTML中的`&lt;select&gt;`元素。它是创建下拉...

    自定义带图标的select，只需把图标地址写在option的title属性中即可

    标题"自定义带图标的select，只需把图标地址写在option的title属性中即可"揭示了这个插件的核心功能，即通过简单的配置就能实现带图标的下拉选项。 首先，让我们理解下拉框（`&lt;select&gt;`）的基本概念。在HTML中，`...

    Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf

    更推荐的方法是利用Ant Design Vue的`label-in-value`属性，它使得`a-select`在选中项时返回包含`value`和`label`的对象，而非单一的值。为了使`placeholder`生效，我们可以使用计算属性来处理`v-model`，确保在未...

    jQuery实现select下拉框菜单选中插件.zip

    这样，我们可以通过调用`$('select').selectOption('valueToSelect')`来实现自动选中。 为了使这个插件更具灵活性，我们可以添加更多的功能，比如默认选中第一个选项或最后一个选项，甚至支持通过文本而非值来选中...

    jquery实现 两个select之间option的转移操作

    本文将深入探讨如何使用jQuery实现两个`&lt;select&gt;`元素之间的`&lt;option&gt;`选项转移操作，包括全选、单选以及删除功能。 首先，我们需要了解`&lt;select&gt;`和`&lt;option&gt;`的基本概念。`&lt;select&gt;`元素用于创建下拉列表，而`...

Magicbox
Global site tag (gtag.js) - Google Analytics