Skip to content

Instantly share code, notes, and snippets.

$('[data-msg]').each(function() {
$this = $(this);
messageText = $this.attr('data-msg');
$this.after('<span>' + messageText + '</span>');
})
$(function(){
$('.dependent-demo4').dependentSelects({
labels: ['District: ', 'Region: '],
placeholderOption: ['Select a district', 'Select a region'],
placeholderSelect: ['Please select a city', 'Please select a district']
});
})
<label>City: </label>
<select name="location" class="dependent-demo4">
<option></option>
<option value="238">London > North > Enfield</option>
<option value="239">London > North > Barnet</option>
<option value="240">London > South > Croydon</option>
<option value="241">London > South > Bromley</option>
<option value="242">London > South > Sutton</option>
<option value="243">Bristol > St Pauls</option>
<option value="244">Bristol > Horfield</option>
$(function(){
$('.dependent-demo3').dependentSelects({
placeholderOption: ['= Select District =', '= Select Region =']
});
})
<select name="location" class="dependent-demo3">
<option>= Select City =</option>
<option value="238">London > North > Enfield</option>
<option value="239">London > North > Barnet</option>
<option value="240" selected="selected">London > South > Croydon</option>
<option value="241">London > South > Bromley</option>
<option value="242">London > South > Sutton</option>
<option value="243">Bristol > St Pauls</option>
<option value="244">Bristol > Horfield</option>
<option value="245">Bristol > Bedminster</option>
$(function(){
$('.dependent-demo2').dependentSelects({
separator: ' || ',
placeholderOption: '-- Please Select --'
});
})
<select name="location" class="dependent-demo2">
<option>-- Please Select --</option>
<option value="238">London || North || Enfield</option>
<option value="239">London || North || Barnet</option>
<option value="240">London || South || Croydon</option>
<option value="241">London || South || Bromley</option>
<option value="242">London || South || Sutton</option>
<option value="243">Bristol || St Pauls</option>
<option value="244">Bristol || Horfield</option>
<option value="245">Bristol || Bedminster</option>
$(function(){
$('.dependent-demo1').dependentSelects();
})
<select name="location" class="dependent-demo1">
<option></option>
<option value="238">London > North > Enfield</option>
<option value="239">London > North > Barnet</option>
<option value="240">London > South > Croydon</option>
<option value="241">London > South > Bromley</option>
<option value="242">London > South > Sutton</option>
<option value="243">Bristol > St Pauls</option>
<option value="244">Bristol > Horfield</option>
<option value="245">Bristol > Bedminster</option>