CODEWITHSUNDEEP
phpjqueryhtml
user6896329
user6896329

Reputation:

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>

Upvotes: 2

Views: 200

Answers (2)

Shwan Namiq
Shwan Namiq

Reputation: 631

you must save the current selected variants within the second select tag by using PHP codes. change the second select tag box to this select box below

<select id="variants" name="<?php echo $bsn_option; ?>[<?php echo $id2; ?>]" class="form-control">
<?php
    $currentFont = $YPE_font[$id1];
    foreach ($jsItems[$currentFont] as $variants) { ?>
        <option value="<?php echo $variants; ?>" <?php echo selected($YPE_font[$id2], $variants, false); ?>><?php echo $variants; ?></option><?php
    }
?>

Upvotes: 1

M.Alnashmi
M.Alnashmi

Reputation: 592

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>

Upvotes: 1

Related Questions