I have the code below for google fonts I retrieved google fonts detail as JSON data from google web fonts URL. Then i put all information into $items = $data['items'];

Then I created the select box for Goole font names and then created another select box for google font variants(font weights) by using javascript.

All codes work without any error. I put the <?php echo selected($YPE_font['my_option'], $item['family'], false); ?> for saving the first select box font names value in my_option array.

But I don't know how i can save the second select box values within javascript code in my plugin option name array

    $YPE_font = get_option('my_option_name');
$items = $data['items'];
$jsItems = array();
foreach($items as $item) {
    $family = $item['family'];
    $jsItems[$family] = $item['variants'];
<select id="fonts" name="my_option[<?php echo $id1; ?>]" class="form-control">
<?php foreach($items as $item): ?>
    <option value="<?php echo $item['family']; ?>" <?php echo selected($YPE_font[id1], $item['family'], false); ?>><?php echo $item['family']; ?></option>
<?php endforeach;?>
<select id="variants" name="my_option[<?php echo $id2; ?>]" class="form-control">


    var items = <?php echo json_encode($jsItems);?>;
        var selectedFont = $(this).val();
        var variants     = items[selectedFont];
        for (i = 0; i < variants.length; i++){
            $("#variants").append('<option value="'+variants[i]+'">'+variants[i]+'</option>');

Must the second select box as below. the javascript code only responsible to change the font variants when you change the first select box values and don't use it to save the values.

<select id="variants" name="<?php echo $bsn_option; ?>[<?php echo $id2; ?>]" class="form-control">
    $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 might try to json_decode instead of json_encode to populate your items var.

On the php side, you must encode your json var, for a real js parsing, you can use (in the change function) $.parseJSON(items)

  • please can help me explain for me by using code I don't have more information about saving plugin options within javascript codes. In Wordpress codex have this PHP code selected( $selected, $current, $echo); for saving options. But I don't know put any code into javascript code until save my options – SAFEEN 1990 Sep 29 '16 at 12:15
  • I don't really understand ? selected() function is not a way to save options values, it is just to add the selected=selected attribute to the option value ? – Benoti Sep 29 '16 at 13:32
  • in my plugin panel when I select variants item and then click on Save setting don't save the variants item and maintains blank. – SAFEEN 1990 Sep 29 '16 at 14:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.