javascript - 需要根据条件隐藏选定的元素

标签 javascript jquery jquery-selectors global-variables variable-declaration

我有包含各种选项的下拉菜单

  • 进行中
  • 已订购
  • 未订购
  • 已完成
  • 已取消

我有一个表单,需要在状态为新时隐藏 ETA 行,然后为任何其他状态启用它。这是我尝试过的:

var progress, ordered, unordered, completed, cancelled, reg, high, user, trimUser, etaDate, etaRow, etaHour, etaMinutes;

function initiate() {
    //declaring necessary variables
    declaration()
}

function declaration(){
    //Declaration of variables for status changes
    sNew = $("option[value='New']");
    progress = $("option[value='In Progress']");
    ordered = $("option[value='Ordered']");
    unordered = $("option[value='Unordered']");
    completed = $("option[value='Completed']");
    cancelled = $("option[value='Cancelled']");

    //Declaring variables for priority changes
    reg = $('input[value="ctl00"]');
    high = $('input[value="ctl01"]');

    //Declaring current user using SPServices 
    user = $().SPServices.SPGetCurrentUser({
    fieldName: "Name",
    debug: false
    });

    //Declaring variables for ETA field manipulation
    etaRow = $("nobr").filter(function () { return $.trim(this.childNodes[0].nodeValue) === "ETA"; }).closest("tr");
    etaDate = $('input[title="ETA"]');
    etaHour = $("[id$=DateTimeFieldDateHours]");
    etaMinutes = $("[id$=DateTimeFieldDateMinutes]");

}

function hideETA(){
    //hide ETA options
    etaRow.hide();

    if(sNew.not(:checked)){
        alert('CP1');
        eta.show();
    }
}

所以我尝试的方法是最初隐藏它(因为 new 是默认值),然后当它不是新的时,显示它。

编辑: 我想我已经解决了,这就是我在 @Richard 的帮助下用我的 if 语句和选择器做到的:

function setETA(){
    //Hide, Display and Disable ETA based on stages         
    if(sNew.is(":checked")){
        etaRow.hide();
    }else if (progress.is(":checked")){
        //do nothing, should be already showing
    }else{
        etaDate.attr("readonly","true").css('background-color','#F6F6F6');
        etaHour.attr("disabled","disabled");
        etaMinutes.attr("disabled","disabled");
    }
}

最佳答案

2种可能性:

  • 显示 = 无
  • 删除该选项

显示方式:http://jsfiddle.net/r7gLU/1/

// Hide the Option
var opt = $('option[value=New]');
opt.css('display','none');
if( opt.parent().val() == 'New' )
    opt.next().attr("selected", "selected");

// Show the Option
var opt = $('option[value=New]');
opt.css('display','');

关于javascript - 需要根据条件隐藏选定的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18406995/

相关文章:

javascript - 使用 jquery,获取具有特定类名的 "next"文本框的最佳方法是什么

jQuery - 选择所有 <span> 元素并删除其文本

php - PHP 代码中 if 语句中的意外行为

JQuery IFrame Load 事件触发得太快

javascript - 在 Trumbowyg 编辑器中添加新行

javascript - 侧边栏中的事件列表

jquery - CSS/JQuery - 过滤表行和反转选择

javascript - 在 Bootstrap timepicker 中更改小时格式

javascript - 从另一个文件中的函数调用回调函数时返回未定义的值

javascript - 使用 Fancybox 和 Nivo slider