Jquery automatically change select box value when another select box change

Question

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>

Shwan Namiq · Accepted Answer · 2016-10-01 23:00:54Z

1

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
    }
?>

answered Oct 1, 2016 at 23:00

Shwan Namiq

6318 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

M.Alnashmi · Accepted Answer · 2016-09-28 22:32:39Z

1

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>

edited Sep 28, 2016 at 22:32

answered Sep 28, 2016 at 22:05

M.Alnashmi

5921 gold badge5 silver badges15 bronze badges

5 Comments

user6896329 Over a year ago

thank you but I don't have more information about javascript and jquery. if you can explain you idea by writing code

user6896329 Over a year ago

Thank you so mutch it is work perfectly without any errors only i change -> to array sign []. for example I changed $i->family to $i['family']

user6896329 Over a year ago

sorry I have the small problem with save the variants field value i use the code in my WordPress admin panel I put this code echo selected($YPE_font[$fonts_id], $item['family'], false); within font option and work perfectly and save the font name after saving the options but i don't know how put the code in variants option until save the variants value after saving the data

Shwan Namiq Over a year ago

Also in my plugin, i have this error. also, my problem is I don't know how I can save plugin options within javascript code

Shwan Namiq Over a year ago

@M.Alnashmi please if you can edit your code until we can save plugin option within select option that appended by javascript code

Collectives™ on Stack Overflow

Jquery automatically change select box value when another select box change

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related