<form class="form form-horizontal">
Get from server <input type="checkbox" name="server" id="server" /><br/>
<div class="form-group">
<label for="company" class="col-sm-2 control-label">Company</label>
<div class="col-sm-10">
<select id="company" name="company" class="form-control linked-dropdown" data-linked="make">
<option value="">-- Select Product --</option>
<option value="1">Product1</option>
<option value="2">Product2</option>
<option value="3">Product3</option>
</select>
</div>
</div>
<div class="form-group">
<label for="make" class="col-sm-2 control-label">Make</label>
<div class="col-sm-10">
<select id="make" name="make" class="form-control linked-dropdown" data-linked="model"></select>
</div>
</div>
<div class="form-group">
<label for="model" class="col-sm-2 control-label">Model</label>
<div class="col-sm-10">
<select id="model" name="model" class="form-control"></select>
</div>
</div>
</form>
<select id="company" name="company" class="form-control linked-dropdown" data-linked="make">
<select id="make" name="make" class="form-control linked-dropdown" data-linked="model"></select>
<select id="model" name="model" class="form-control"></select>
<script>
var options = {
make: {
1:{
1: 'Prod1Make1',
2: 'Prod1Make2',
3: 'Prod1Make3'
},
2:{
4: 'Prod2Make1',
5: 'Prod2Make2',
6: 'Prod2Make3'
},
3 :{
7: 'Prod3Make1',
8: 'Prod3Make2',
9: 'Prod3Make3'
}
},
model: {
1: {
1: 'Prod1Make1Model1',
2: 'Prod1Make1Model2',
3: 'Prod1Make1Model3'
},
2: {
4: 'Prod1Make2Model1',
5: 'Prod1Make2Model2',
6: 'Prod1Make2Model3'
},
3: {
7: 'Prod1Make3Model1',
8: 'Prod1Make3Model2',
9: 'Prod1Make3Model3'
},
4: {
10: 'Prod2Make1Model1',
11: 'Prod2Make1Model2',
12: 'Prod2Make1Model3'
},
5: {
13: 'Prod2Make2Model1',
14: 'Prod2Make2Model2',
15: 'Prod2Make2Model3'
},
6: {
16: 'Prod2Make3Model1',
17: 'Prod2Make3Model2',
18: 'Prod2Make3Model3'
},
7: {
19: 'Prod3Make1Model1',
20: 'Prod3Make1Model2',
21: 'Prod3Make1Model3'
},
8: {
22: 'Prod3Make2Model1',
23: 'Prod3Make2Model2',
24: 'Prod3Make2Model3'
},
9: {
25: 'Prod3Make3Model1',
26: 'Prod3Make3Model2',
27: 'Prod3Make3Model3'
}
}
};
</script>
<script>
$(function() {
$('.linked-dropdown').change(function() {
// GET THE id OF THE NEXT DROPDOWN
// IN THE CHAIN
var linked = $(this).data('linked');
// CREATE THE SELECTOR
var target = '#' + linked;
// EMPTY THE TARGET
$(target).empty();
// EMPTY ALL THE CHILDREN
var child = $(target).data('linked');
while (child) {
$('#' + child).empty();
child = $('#' + child).data('linked');
}
// GET THE SELECTED VALUE
var val = $(this).val();
// AND USE THIS TO GET THE CORRESPONDING
// ARRAY OF OPTIONS
opts = options[linked][val];
// INSERT THE INSTRUCTION OPTION
$(target).append($('<option/>').val('').html('-- Select --'));
// LOOP THROUGH THE TARGET OPTIONS AND ADD THEM
$.each(opts, function(v,o) {
$(target).append($('<option/>').html(o).val(v))
});
});
});
</script>
$(function() {
$('.linked-dropdown').change(function() {
// GET THE id OF THE NEXT DROP DOWN IN THE CHAIN
var linked = $(this).data('linked');
// CREATE THE SELECTOR
var target = '#' + linked;
// EMPTY THE TARGET
$(target).empty();
// EMPTY ALL THE CHILDREN
var child = $(target).data('linked');
while (child) {
$('#' + child).empty();
child = $('#' + child).data('linked');
}
// EVERYTHING UP TO HERE IS UNCHANGED
// SERVER SEND AJAX CALL AND POPULATE WITH RESPONSE
$.ajax({
url: 'getoptions.php',
data: {
linked: linked,
value: $(this).val()
},
type: "POST",
dataType: "html"
}).then(function(resp) {
// SERVER BUILDS HTML RETURN WE JUST INSERT IT
$(target).html(resp);
});
});
});
It is important to note that there are many ways to skin a cat. The above code is just one example of how to deal with the return of the data from the server. In this case the server renders the <option> markup and sends it back. The AJAX done() callback can then just add it to the child. Another option here might have been to receive a JSON return and then add the options with JavaScript - which method you prefer is up to you.
<?php
$options = array (
'make' => array (
1 => array (
1 => 'Server-Prod1Make1',
2 => 'Server-Prod1Make2',
3 => 'Server-Prod1Make3'
),
2=> array (
4=> 'Server-Prod2Make1',
5=> 'Server-Prod2Make2',
6=> 'Server-Prod2Make3'
),
3 => array (
7=> 'Server-Prod3Make1',
8=> 'Server-Prod3Make2',
9=> 'Server-Prod3Make3'
)
),
'model' => array (
1=> array (
1=> 'Server-Prod1Make1Model1',
2=> 'Server-Prod1Make1Model2',
3=> 'Server-Prod1Make1Model3'
),
2=> array (
4=> 'Server-Prod1Make2Model1',
5=> 'Server-Prod1Make2Model2',
6=> 'Server-Prod1Make2Model3'
),
3=> array (
7=> 'Server-Prod1Make3Model1',
8=> 'Server-Prod1Make3Model2',
9=> 'Server-Prod1Make3Model3'
),
4=> array (
10=> 'Server-Prod2Make1Model1',
11=> 'Server-Prod2Make1Model2',
12=> 'Server-Prod2Make1Model3'
),
5=> array (
13=> 'Server-Prod2Make2Model1',
14=> 'Server-Prod2Make2Model2',
15=> 'Server-Prod2Make2Model3'
),
6=> array (
16=> 'Server-Prod2Make3Model1',
17=> 'Server-Prod2Make3Model2',
18=> 'Server-Prod2Make3Model3'
),
7=> array (
19=> 'Server-Prod3Make1Model1',
20=> 'Server-Prod3Make1Model2',
21=> 'Server-Prod3Make1Model3'
),
8=> array (
22=> 'Server-Prod3Make2Model1',
23=> 'Server-Prod3Make2Model2',
24=> 'Server-Prod3Make2Model3'
),
9=> array (
25=> 'Server-Prod3Make3Model1',
26=> 'Server-Prod3Make3Model2',
27=> 'Server-Prod3Make3Model3'
)
)
);
$val = isset($_POST['value']) ? intval($_POST['value']) : false;
$linked = isset($_POST['linked']) ? $_POST['linked'] : false;
if ($val && $linked) {
$opt = $options[$linked][$val];
$return = <<< OPTION
<option value="">-- Select --</option>
OPTION;
foreach($opt as $v => $o) {
$return .= <<< OPTION
<option value="{$v}">{$o}</option>
OPTION;
}
echo $return;
}
That is all there is to it.
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)