css select option page

Question

I have some trouble with printing a div. I'm generating different tables with a dropdown list, these tables are generated in the same <div>, that I then use to print.

<select id='lists'>
<option value='1'>table 1</option>
<option value='2'>table 2</option>
<option value='3'>table 3</option>
</select>

When I select option 1 I want the table to be printed size: portrait;, but when I select 2 or 3 I want it landscape size: landscape;.

Is there a way to do this with css?

Thanks

You could add a class to the div depending on your option and then use the css in this answer: http://stackoverflow.com/questions/14903427/different-page-orientation-for-printing-html — Pete, Jul 28 '15 at 14:31

score 2 · Answer 1 · answered Jul 28 '15 at 14:37

Why don't you just use javascript?

$(function() {
    $('select[id="lists"] option').onChange(function() {
        if ($(this).val() == 1){
          $('table').addClass('portrait');
                    .removeClass('landscape');
        } else {
          $('table').removeClass('portrait');
                    .addClass('landscape');
        }
    });
});

This is only an example. I'm no javascript/JQuery expert so you'll have to look into it. Don't think you can solve it using just CSS.

css select option page

1 Answers1