0

I want to show/hide a div based on the value of a SP dropdown/choice column on form.

I have written below code to this which is not written correctly.

Can anyone help me with syntax to correct this?

$(document).ready(function(){
if $("#mydropdownid").change(function(){
        == ""){
            document.getElementById("Badge").style.display = 'none';
            document.getElementById("NoBadge").style.display = 'none';
}

if
    $("#mydropdownid").change(function(){
        == "CDS ID") {
            document.getElementById("NoBadge").style.display = 'block';
            document.getElementById("Badge").style.display = 'none';
} 

if
    $("#mydropdownid").change(function(){
        == "CDS ID + Badge") {
            document.getElementById("Badge").style.display = 'block';
            document.getElementById("NoBadge").style.display = 'none';
    }
}
  • Is this a SharePoint form, or something on a custom page? – lazoDev Nov 5 '18 at 15:17
  • Sharepoint form (custom) – ideaguy1974 Nov 5 '18 at 15:20
1

The problem there is that you are hooking up three different change event handlers inside if statements, and not actually getting the value of the drop-down. You need to hook up the change event only once, and then once it has changed, check what the new value is:

$(document).ready(function () {
    // hook up the change event handler
    $("#mydropdownid").change(function () {

        // once the drop-down has changed, then you can check its value
        if ($(this).val() === "") {
            document.getElementById("Badge").style.display = 'none';
            document.getElementById("NoBadge").style.display = 'none';
        }

        if ($(this).val() === "CDS ID") {
            document.getElementById("NoBadge").style.display = 'block';
            document.getElementById("Badge").style.display = 'none';
        }

        if ($(this).val() === "CDS ID + Badge") {
            document.getElementById("Badge").style.display = 'block';
            document.getElementById("NoBadge").style.display = 'none';
        }
    }
}

Keep in mind that drop-downs can have a different value for the current selection behind the scenes than what is actually displayed as the text representation for that choice, so if you are not getting the results you expect using this code, you might need to replace all of the

$(this).val()

bits with

$(this).text()
  • 1
    Very succinct. I also wanted to add that you can get the elements via JQuery: $("#NoBadge").css('display', 'block'); I like this because it's faster to write lol – Arin Zandbergen Nov 5 '18 at 19:52
0

It can be difficult getting ahold of the controls on the forms and getting rid of them all the way. I have answered this question once before here. This should work to hide based on your logic. Use that code to do the removal. Good Luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.