Trying to show a <tr> if an option is selected

Question

I've hidden a row in a form but I'd like this row to display when my select option is set to "Cancelled"

This is how I went about it:

if($("option[value='Cancelled']").attr("selected") == "selected"){
    //Remove New option when Cancelled
    $("option[value='New']").remove();
    $("nobr").filter(function () { return $.trim(this.childNodes[0].nodeValue) === "Cancel Note"; }).closest("tr").show();
}

In the console, I've noticed that the selected attribute does not dynamically change when switching between , I assume that's the problem but I'm not sure how to go about fixing that.

Rest of Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">

_spBodyOnLoadFunctionNames.push("hideFields");

//Disables unused Priority radiobox
function hideFields() {
    //priority - disable unchecked radiobox
    var reg = document.getElementById("ctl00_m_g_0537f4e9_69aa_409a_b5ed_15e3624efeab_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00");
    var high = document.getElementById("ctl00_m_g_0537f4e9_69aa_409a_b5ed_15e3624efeab_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl01");

    if(reg.checked == true){
        high.disabled=true;
    }else{
        reg.disabled=true;
    }
    //On item edit, set status to In Progress if in New
    if($("option[value='New']").attr("selected") == "selected"){
        //Disable New
        $("option[value='New']").remove();
        $("option[value='Completed']").remove();
        $("option[value='Cancelled']").remove();

        //Enable In Progress
        $("option[value='In Progress']").attr("selected","selected");

    }else if($("option[value='In Progress']").attr("selected") == "selected"){
        //Remove New option
        $("option[value='New']").remove();
        $("option[value='In Progress']").remove();
        $("option[value='Completed']").attr("selected","selected");
        $("nobr").filter(function () { return $.trim(this.childNodes[0].nodeValue) === "Cancel Note"; }).closest("tr").hide();
    }else if($("option[value='Completed']").attr("selected") == "selected" ){
        //Remove New option when Completed/Cancelled
        $("option[value='New']").remove();
        $("nobr").filter(function () { return $.trim(this.childNodes[0].nodeValue) === "Cancel Note"; }).closest("tr").hide();
    }else if($("option[value='Cancelled']").is(':selected')){
        //Remove New option when Cancelled
        $("option[value='New']").remove();
        $("nobr").filter(function () { return $.trim(this.childNodes[0].nodeValue) === "Cancel Note"; }).closest("tr").show();
}

    //call orderID
    orderID();
}
function PreSaveAction() {
    //Check is Work Order is claimed
    if ($('#content').length == 0){
    alert("Please claim Work Order by typing your name or email in NAPA User Field");
    return false ;
    }
    else { return true ;}
}

//I've deprecated this function - Not compatible with Chrome/FF
function findacontrol(FieldName) {
   var arr = document.getElementsByTagName("!");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {         return arr[i];      }
   }
}

//Sets Order ID field to read only in edit form
function orderID() {
    //Set the Field to Read only and change its background colour
    $("input[title='Order ID']").attr("readonly","true").css('background-color','#F6F6F6');

    //call setFocus();
    setFocus();
    }

//Sets cursor Focus to NAPA users
function setFocus() {
    //set focus to NAPA user
    document.getElementById("ctl00_m_g_0537f4e9_69aa_409a_b5ed_15e3624efeab_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv").focus();
}

 </script>

Answer 1

I don't know what triggers your block of code, but just for testing purposes I'll use the change event on the select. This is how I would do it:

$("#myselect").on("change", function () {
    var $this = $(this);
    if ($this.val() == "Cancelled") {
        //Remove New option when Cancelled
        $this.find("option[value='New']").remove();
        $("nobr").filter(function () {
            return $.trim(this.childNodes[0].nodeValue) === "Cancel Note";
        }).closest("tr").show();
    }
});

Fiddle

Answer 2

Try

if($("option[value='Cancelled']").is(':selected')){
    //Remove New option when Cancelled
    $("option[value='New']").remove();
    $("nobr").filter(function () { return $.trim(this.childNodes[0].nodeValue) === "Cancel Note"; }).closest("tr").show();
}