Add text to top of DispForm.aspx dependant on specific field value

Question

I need to add the word "Jersey" in red/bold to the top of the Display Form page on a SharePoint online list when 'Jersey' is selected from the 'Location' dropdown field.

Please could you let me know if this is possible? And how I would achieve this? I understand that this could be possible with Javascript however I have limited knowledge of this.

Answer 1

Sample test demo for your reference(insert script editor webpart into your list display form and insert the script into it).

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var location = $("span:contains('Location')").closest('tr').find('#SPFieldChoice')[1].innerText;
            if ($('#customTip').length < 1) {
                var customTip = $('<div id="customTip" style="min-width:300px;color:red;font-weight: bold;text-align:center">' + location + '</div>');
                if (location == "Jersey") {
                    $('table.ms-formtable').parent().prepend(customTip);
                }
            }
        })
    </script>

Update:

Edit form.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var location = $('select[id^="Location"] :selected').text();;
            if ($('#customTip').length < 1) {
                var customTip = $('<div id="customTip" style="min-width:300px;color:red;font-weight: bold;text-align:center">' + location + '</div>');
                if (location == "Jersey") {
                    $('table.ms-formtable').parent().prepend(customTip);
                }
            }
        })
    </script>

Answer 2

Add a content editor webpart in your page and add the below code, we are creating an empty div - lblLocation and on value change in "Location" drop-down, we get the selected value from the drop-down and setting it to the div - lblLocation.

<div id="lblLocation" style="font-weight: bold; color: red;"></div>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("select[title*='Location']").change(function() {
        $('#lblLocation').append($('option:selected', this).text());        
    }
});
</script>