Consider a model that has 2 types: A and B. Both types store a color as a string. Type A can be blue or red. Type B can be white or black.
When displaying the form for type A, there is an HTML select list that contains [blue, red]. For type B, the select list contains [white, black].
What is the best method to display these two different selects for the same model?
Switching on type does not work because when you create a new model, there is no type.
Do you need to have two create buttons, one for each type? Or should this be designed as two separate models, inheriting from a common base model?
I considered an AJAX (jQuery) update of the select based on the selection of type. This seems like a very complicated solution to a simple problem.
Enforcing the color-type restrictions should definitely be done in validations in the model. In order to keep the views consistent with your models, I suggest a bit of javascript:
<select class="type-select">
<option value="TypeA">Type A</option>
<option value="TypeB">Type B</option>
</select>
<select class="type-A-opts">
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>
<select class="type-B-opts" style="display:none" >
<option value="black">Black</option>
<option value="white">White</option>
</select>
<script>
$(".type-select").change(function(){
var cur_value = $(this).attr("value");
if(cur_value == "TypeA"){
$(".type-A-opts").show();
$(".type-B-opts").hide();
}else{
$(".type-A-opts").hide();
$(".type-B-opts").show();
}
});
</script>
I suggest optgroup.
<select>
<optgroup label="type A">
<option value="blue">Blue</option>
<option value="red">Red</option>
</optgroup>
<optgroup label="type B">
<option value="black">Black</option>
<option value="white">White</option>
</optgroup>
</select>