1

I have a cascading lookup using two lists on my SharePoint 2010 site. I want to get the value of first selection made in the lookup and show/hide other fields on my custom form based on that first selection but the select statement (see below) doesn't appear to work on lookup fields. How can I achieve this? Thanks in advance!!

//Show/hide columns based on Drop Down Selection 
$("select[title='Impact1']").change(function() {
   if ($("select[title='Impact1']").val() == "No") { 
          $('nobr:contains("NPE")').closest('tr').show();
   }
});
2

A few things could be wrong:

  • the javascript may not even be loaded onto your page
  • you could have a syntax error in your javascript
  • your select field reference for 'Impact1' could be wrong
  • your 'val()' function may not be returning the appropriate value
  • your selector for 'NPE' could be wrong

You can debug these one step at a time using the developer tools for your browser. For example, if you are using IE, press F12 to access the IE Dev Tools and do the following tests:

  • select 'Console'
  • look at the existing console output and see if any javascript syntax errors are listed. If you see any, address these issues.
  • at the console terminal prompt at the bottom, enter:

    $("select[title='Impact1']")

    • verify that the jquery selector returns an element, if it does not, then use the dom explorer and 'select element' to select the input and find out what the title you should look for is

    $("select[title='Impact1']")val()

    • verify that the value is properly echo'd out
  • at the console terminal prompt, enter:

    $('nobr:contains("NPE")')

    • verify that the jquery selector returns an element, if it does not, then use the dom explorer and 'select element' to select the element and find out what the properties you should reference are
  • at the console terminal prompt, enter:

    $('nobr:contains("NPE")').closest('tr')

    • verify that the jquery selector returns an element. If it does not, debug as you did above
  • at the console terminal prompt, enter:

    $('nobr:contains("NPE")').closest('tr').show()

    • verify that your element goes from being hidden to shown
  • finally, you can paste the entire function into the console terminal and test it out

    $("select[title='Impact1']").change(function() { 
       if ($("select[title='Impact1']").val() == "No") { 
          $('nobr:contains("NPE")').closest('tr').show();    
       } 
    });
    
  • Thanks for your prompt response! I followed your instructions and played around with the syntax and the following returns an accurate false value in the console but the script isn't executing the show/hide - ($("select[id='Impact1_casc']").text() == "PE Non-IT") – Kms Feb 11 '14 at 20:39
  • This returns an accurate result in the console but does not show hide: $("select[id='Impact1_casc']").change(function() { if ($("select[id='Impact1_casc']").text() == "PE Non-IT") { $('nobr:contains("Positions")').closest('tr').show(); $('nobr:contains("Unloaded Salary Band")').closest('tr').show(); – Kms Feb 11 '14 at 20:52
  • You say that ($("select[id='Impact1_casc']").text() == "PE Non-IT") evaluates to 'false'. In your logic above, you are only executing the 2 'show' actions if that evaluates to 'true'. – tyshock Feb 11 '14 at 21:21
  • Yes the item i was testing contained the value NPE Non-IT so it correctly returned a false result at the console. If the lookup field contains PE Non-IT the corresponding show statement still doesn't execute. Thanks again for your time, I really appreciate it. – Kms Feb 11 '14 at 21:52
  • try replacing the inside of the change function with a simple "alert("i changed");" statement so that you can verify it is firing correctly when the value changes. – tyshock Feb 11 '14 at 22:18
0

I am assuming Impact1 is your lookup field? If you look at the HTML code that SharePoint spits out when you have a lookup field as a dropdown you will see that the actual text values are not in the .val() property, but instead in the .text() property.

0

The val() is the ID of the lookup item and not the display field. So if the 'No' entry in your lookup list has an ID of 3 then:

//Show/hide columns based on Drop Down Selection 
$("select[title='Impact1']").change(function() {
   if ($("select[title='Impact1']").val() == 3) { 
          $('nobr:contains("NPE")').closest('tr').show();
   }
});

ALTERNATIVELY

I believe You can skip figuring out the ID and just do this:

//Show/hide columns based on Drop Down Selection 
$("select[title='Impact1']").change(function() {
   if ($("select[title='Impact1'] option:selected").text() == "No") { 
          $('nobr:contains("NPE")').closest('tr').show();
   }
});

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.