Laila Hadi Laila Hadi - 2 months ago 7
PHP Question

Jquery automatically change select box value when another select box change

I have this line of PHP code

$data = json_decode($response, true);
and
$items = $data['items']
that is return json data from sepecific URL as below

{
"items": [
{
"family": "ABeeZee",
"variants": ["regular","italic"]
},
{
"family": "Abril Fatface",
"variants": ["regular","400italic","900"]
},
{
"family": "Advent Pro",
"variants": ["100","200","300","regular","500","600","700"]
}
]
}


And I create this
foreach
loop for retrieve the font family names and I put them into the select box the code work without a problem.

And I want to create another select box to retrieve the
variants
data according to each font family. I want when I select
ABeeZee
font, The Variant select box only shows
regular and italic
. And when I select
Abril Fatface
font, The Variant select box only shows
regular,400italic and 900
. How can I do this by using jquery?

<select name="font-family" id="fonts">
<?php
foreach ($items as $item) {
$font_names = $item['family'];
<option value="<?php echo $font_names; ?>"><?php echo $font_names; ?></option><?php
}
?>
</select>

Answer

You'll have to create an associative array where the keys are the font and the value is an array of the variants.

You pass that to your JavaScript as a Json string so it becomes a JavaScript object.

Then when's the font changes, you fetch the values of the js object which would be your variants, and you populate your variant select with them.

<?php
//the raw json string
$data = json_decode('{"items": [
    {
    "family": "ABeeZee",
    "variants": ["regular","italic"]
    },
    {
    "family": "Abril Fatface",
    "variants": ["regular","400italic","900"]
    },
    {
    "family": "Advent Pro",
    "variants": ["100","200","300","regular","500","600","700"]
   }
]}');

$items = $data->items;

//we need to convert the object into an associative
//array where the family becomes the key and the value
//is an array of variants. This allows us to access
//the variants of a specific font
//$jsItems would become = [
//    'AbeeZee' => ['regular', 'italic'],
//    'Abril Fatface' => ['regular', '400italic', '900'],
//    .. etc
$jsItems = [];
foreach($items as $i) $jsItems[$i->family] = $i->variants;

?>

<html>
<body>

<select id="fonts">
    <?php foreach($items as $i): ?>
        <option value="<?php echo $i->family;?>"><?php echo $i->family;?></option>
    <?php endforeach;?>
 </select>

 <select id="variants"></select>

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
 $(document).ready(function(){
    var items = <?php echo json_encode($jsItems);?>;

    $("#fonts").change(function(){
        var selectedFont = $(this).val();
        var variants     = items[selectedFont];
        $("#variants").html('');

        for (i = 0; i < variants.length; i++){
            $("#variants").append('<option value="'+variants[i]+'">'+variants[i]+'</option>');
        }
    })
});
</script>
</body>
</html>
Comments