Laila Hadi Laila Hadi - 11 months ago 46
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 Source

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>