Skip to content

Instantly share code, notes, and snippets.

@JonMidhir
Created October 18, 2013 15:01
Show Gist options
  • Save JonMidhir/7042874 to your computer and use it in GitHub Desktop.
Save JonMidhir/7042874 to your computer and use it in GitHub Desktop.
Here's a simple way to make multiple select fields dependent on one another. When a value is selected in one it is disabled in the others and cannot be selected.
$.fn.dependentSelect = ->
$(@).addClass('dependent')
@each ->
$(@).data('pre', $(@).val())
@disableOthers = ->
$('select.dependent')
.not($(@))
.find("option[value=#{$(@).val()}]")
.prop('disabled', true)
@disableOthers()
$(@).on 'change', (e) =>
$target = $(e.currentTarget)
prev = $target.data('pre')
$("select.dependent option[value=#{prev}]")
.prop('disabled', false)
@disableOthers()
$target.data('pre', $target.val())
@JonMidhir
Copy link
Author

Try it out on this here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment