{"id":611,"date":"2010-07-16T16:56:55","date_gmt":"2010-07-16T21:56:55","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=611"},"modified":"2010-07-16T16:56:55","modified_gmt":"2010-07-16T21:56:55","slug":"intelligent-select-box-filtering","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/intelligent-select-box-filtering\/","title":{"rendered":"Intelligent Select Box Filtering"},"content":{"rendered":"

\"\"<\/a><\/p>\n

One of the great things about building websites for a living is the challenges tend to change from day to day. There\u2019s always a new puzzle to solve.<\/p>\n

Take today, for example. I was building a page that contained a series of select (dropdown) boxes. Now, I\u2019ve been around the block once or twice before, and this wasn\u2019t my first time using selects. However, this implementation came with a unique twist: all the boxes contained the exact same options, but we only wanted each to be selectable once. Specifically, each box contained a list of security questions — your mom\u2019s best friend\u2019s grandmother\u2019s maiden name, that sort of thing. <\/p>\n

The code looks something like this:<\/p>\n

<select class="security" name="security1">\n\t<option value="0">Select a question.<\/option>\n\t<option value="1">Who's your daddy?<\/option>\n\t<option value="2">What's your favorite color?<\/option>\n\t<option value="3">What time is it?<\/option>\n<\/select>\n<select class="security" name="security2">\n\t<option value="0">Select a question.<\/option>\n\t<option value="1">Who's your daddy?<\/option>\n\t<option value="2">What's your favorite color?<\/option>\n\t<option value="3">What time is it?<\/option>\n<\/select><\/pre>\n
Now, naturally, we want the user to select several different security questions. But what\u2019s to stop them from selecting the same question several times? Well, in our case, back-end validation… but I wanted to solve the problem before we got to that point. I wanted to eliminate \u201cselected\u201d questions from all the other dropdown boxes, so it wouldn’t even be an option. This has the added benefit of shortening the list of options as the user goes along, which would make scanning the options easier.<\/p>\n
After a bit of playing, I came up with the following jQuery script which seems to do the trick:<\/p>\n
$(function () {\n  $('.security').change(function () {\n    $('.security option').show(0);\n    $('.security option:selected').each(function () {\n      oIndex = $(this).index();\n      if (oIndex > 0) {\n        $('.security').each(function () {\n          $(this).children('option').eq(oIndex).not(':selected').hide(0);\n        });\n      }\n    });\n  });\n  $('.security').change();\n});<\/pre>\n
I\u2019ll walk you through what I\u2019m doing here.<\/p>\n
First, we\u2019re setting the script to fire whenever the \u201csecurity\u201d select boxes are changed. In other words, whenever someone makes a new selection in one of our dropdowns.<\/p>\n
When a selection is made, the first thing we do is re-display any previously hidden options, to put us back on even footing. Then we loop through each of the selected options in our select boxes. If the first item isn\u2019t selected, we\u2019ll proceed. (In our use-case, the first option was a generic \u201cmake a selection\u201d option, so I didn\u2019t want it to count as a question).<\/p>\n
Once we know a true question has been selected, we\u2019ll loop through all our select boxes. We\u2019re making heavy use of the jQuery .index() and .eq() functions here. Both functions use the idea of zero-based array indexing to number all of our elements; the fifth option in a dropdown would have an index of 4, the third dropdown with a class of \u201csecurity\u201d would have an index of 2, and so on. The .index() function lets us grab the index number of any item we already have, and the .eq() function lets us specify which new element we want to grab.<\/p>\n
So first up, we grab the index value of the currently selected option. Since all of our questions are in the same order in each dropdown, those questions have the same indexes across the board. Then we loop through each of our select boxes. If the option is not currently selected<\/strong> in that dropdown, we hide it \u2013 in other words, the only dropdown that will still contain that question is the one in which it was already selected.<\/p>\n
And then, at the very end, we fire our change function. The first time our page loads, that won\u2019t do much. But if anyone refreshes the browser window, the browser will save their select options… which means we need to filter them right when the page loads. Otherwise, all of our questions would be visible again whenever the page reloaded.<\/p>\n
I put together a demo here. Take a look!<\/a><\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
These select boxes all contain the exact same security question. However, each question can only be selected once — we’re using jQuery to remove selected questions from all the other dropdowns. […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":613,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165,184],"tags":[62,270,55,291,293],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/611"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=611"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/611\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/613"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}