Hide/Show field in EditForm based on already existing dropdown value

Question

I'm totally new to SP and JS, so sorry in advance for lame question. I find situation similiar to mine here - Conditionally Hide/Show Field on Custom Edit Form but can't make it work.

I have an Edit form where dropdown field (Field A) is existed. There are two other fields (Field B and Field C) which I want to hide from form when Field A is set to specific value.

I can change Fields B and C visibility based on changing Field A using code below (this part works fine) but I also need Fields B and C hidden/shown without changing Field A but based on its current value - when EditForm just initially loads.

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script> 
<script type="text/javascript">
         $(document).ready(function () {
            $("select[title='Field A']").change(function () {
            console.log("selection changed", $("[title='Field A'] option:selected").text());
                if ($("[title='Field A'] option:selected").text() != "X") {
                    $('nobr:contains("Field B")').closest('tr').hide();
                    $('nobr:contains("Field C")').closest('tr').hide();
                }
                else {
                    $('nobr:contains("Field B")').closest('tr').show();
                    $('nobr:contains("Field C")').closest('tr').show();
                }
            });
        });

</script>

All I need here is Field B and C are hided immediately when form is initially loaded and Field A was already set !=X (without changing Field A).

If you can provide the full code I will highly appreciate it.

Answer 1

You could add css style to hide Filed B and Field C.

selector{
display:none
}

Or

    <script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script> 
    <script type="text/javascript">
             $(document).ready(function () {
                        $('nobr:contains("Field B")').closest('tr').hide();
                        $('nobr:contains("Field C")').closest('tr').hide();
                $("select[title='Field A']").change(function () {
                console.log("selection changed", $("[title='Field A'] option:selected").text());
                    if ($("[title='Field A'] option:selected").text() != "X") {
                        $('nobr:contains("Field B")').closest('tr').hide();
                        $('nobr:contains("Field C")').closest('tr').hide();
                    }
                    else {
                        $('nobr:contains("Field B")').closest('tr').show();
                        $('nobr:contains("Field C")').closest('tr').show();
                    }
                });
            });
    
    </script>

According to your code, hiding Field B and Filed A when Field A is not equal to X does not match your description.

Updated code:

<script type="text/javascript">
         $(document).ready(function () {
            showOrHide() ;
            $("select[title='Field A']").change(function () {
                showOrHide();
                
            });
        });
function showOrHide(){
    if ($("[title='Field A'] option:selected").text() != "X") {
                    $('nobr:contains("Field B")').closest('tr').hide();
                    $('nobr:contains("Field C")').closest('tr').hide();
                }
                else {
                    $('nobr:contains("Field B")').closest('tr').show();
                    $('nobr:contains("Field C")').closest('tr').show();
                }
}
</script>