根据表单输入显示/隐藏选项

Question

I have two selectmenu's. One named #c1 and one named #c2. #c2 is hidden and will be shown when an option (any option) in c1 is selected. This works fine, however i would like a small adjustment that i can't seem to figure out due to my limited knowledge of Javascript/jQuery.

When #c1's option "meta" is selected, i would like to show #c2 as with any other option, but i would like #c2 to have an aditional option.

Eg

<select id="c1">
<option>Option 1</option>
<option>Option 2, etc.</option>
<option>Metadata</option>
</select>

<select id="c2">
<option>Option 1</option>
<option>Option 2, etc.</option>
<option>Metadata</option> // This should be shown only when "metadata" in #c1 is selected and hidden when not.
</select>

A problem i came accross is that options are hard to hide using just CSS and my JS-knowledge is limited. A solution is here , but i can't mold that into the chained selection that i want.

I created a Fiddle here, so you can see all selectboxes and the current JS.

Answer 1

I'm not sure it's the best way to do it but i guess it will work:

var optionsArray = [{'key':'1','value':'val1','text':'Option 1'},
           {'key':'2','value':'val2','text':'Option 2, etc.'},
           ]; // Array of the #2 Options without the metadata


$('select[name="c1"]').change( function() {

    // Put your show/hide code here

    $('select[name="c2"] option').remove();// remove all the c2 options (In case there is already metadata)
    $.each(optionsArray, function(i){ //add all the basic options
          $('select[name="c2"]').append($("<option></option>")
            .attr("value",optionsArray[i]['value'])
              .text(optionsArray[i]['text']));
    });

    var valSelect1 = $(this).val();
    if (valSelect1 == 'Metadata'){ // add metadata only if the c1 option is metadata
         $('select[name="c2"]').append('<option value="Metadata">Metadata</option>');
    }
});

Hope It'll help