Skip to content

Instantly share code, notes, and snippets.

@masasakano

masasakano/country_town_dynamic_dropdown.html

Last active July 6, 2021 15:08
Show Gist options
  • Save masasakano/80d42a4f146f6888f072e04c6c8ad3ab to your computer and use it in GitHub Desktop.
Save masasakano/80d42a4f146f6888f072e04c6c8ad3ab to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic dropdown menu for country-town. Town menu hidden first. It'll appear, but including optgroup country name.
Raw
country_town_dynamic_dropdown.html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="https://jsfiddle.net/masa_alpin/z1sjekvt/35/">jsfiddle</a>
<!-- country-town working with town hidden mostly4 -->
<!-- country-town dynamic dropdown menu. Town menu hidden first. It'll appear, but including optgroup country name, with tidied-up code. -->
<form action="/persons" accept-charset="UTF-8" method="post">
<div class="field">
<label for="person_place.town_id.country_id">Country</label>
<select name="person[place.town_id.country_id]" id="person_place.town_id.country_id">
<option value="" label=" "></option>
<option value="40">Earth</option>
<option value="40">World</option>
<option value="50">Australia</option>
<option value="60">UK</option>
</select>
</div>
<div class="field">
<label for="person_place.town_id">Town</label>
<select name="person[place.town_id]" id="person_place.town_id">
<option value="" label=" "></option>
<optgroup label="World">
</optgroup>
<optgroup label="Australia">
<option value="501">Sydney</option>
<option value="502">Perth</option>
</optgroup>
<optgroup label="UK">
<option value="601">London</option>
<option value="602">Perth</option>
</optgroup>
</select>
</div>
<div class="actions">
<input type="submit" name="commit" value="Create Person" data-disable-with="Create Person">
<input type="reset" name="reset" value="Reset (Start Over)" id="reset_button" data-disable-with="Reset (Start Over)">
</div>
</form>
<script>
var contsel = "#" + $.escapeSelector('person_place.town_id.country_id');
var townsel = "#" + $.escapeSelector('person_place.town_id');
$(townsel).parent().hide();
$(contsel).change(function() {
var townsel = "#" + $.escapeSelector('person_place.town_id');
var contsel = "#" + $.escapeSelector('person_place.town_id.country_id');
var country = $.escapeSelector($(contsel + ' :selected').text());
var towns = $(townsel).html();
var options = $(towns).filter("optgroup[label='" + country + "']").html();
if (options) {
$(townsel).parent().show();
$(townsel).show();
$(townsel + " optgroup").hide();
$(townsel + " optgroup[label='" + country + "']").show();
$(townsel).find('option:selected').prop("selected", false);
} else {
$(townsel).hide();
$(townsel).parent().hide();
}
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment