Jquery automatically change select box value when another select box change

Tags: php jquery html
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>


Answers

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



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>


Binary operation can be performed on char data type with unsigned. Even if its an array binary operation can be done to the single element of the array.

for your reference.

ssize_t read(int fd, void *buf, size_t count);

buffer has to be address of the character or character array, in your single char is sufficient. If you want to use array use the element array[0] and perform operation on that.

As mentioned in the comments above

unsigned char c; 
read(file, &c, 1);


This video can help you solving your question :)
By: admin