[RESOLVED] Select - display content before actually selecting an option

[meek]

Hi.

I have two conditional select boxes:

<script type="text/javascript">
    $(document).ready(function () {
       $department = $("select[name='prod']");
       $ph = $("select[name='ph']");

       $department.change(function () {

           if ($(this).val() == "Apple") {
               $("select[name='ph'] option").remove();
               $("<option value=\"iphone4\">Iphone 4</option>").appendTo($ph);
               $("<option value=\"iphone5\">Iphone 5</option>").appendTo($ph);
           }

           if ($(this).val() == "Samsung") {
               $("select[name='ph'] option").remove();
               $("<option value=\"galaxys2\">Galaxy S III</option>").appendTo($ph);
               $("<option value=\"galaxys3\">Galaxy S II</option>").appendTo($ph);
           }

           if ($(this).val() == "Nokia") {
               $("select[name='ph'] option").remove();
               $("<option value=\"lumia900\">Lumia 900</option>").appendTo($ph);
               $("<option value=\"lumia800\">Lumia 800</option>").appendTo($ph);
           }

           if ($(this).val() == "HTC") {
               $("select[name='ph'] option").remove();
               $("<option value=\"htconex\">ONE X</option>").appendTo($ph);
               $("<option value=\"htcones\">ONE S</option>").appendTo($ph);
               $("<option value=\"htconev\">ONE V</option>").appendTo($ph);
               $("<option value=\"htcdesirec\">Desire C</option>").appendTo($ph);
           }

           if ($(this).val() == "Brand") {
               $("select[name='ph'] option").remove();
               $("<option value=\"\">Model</option>").appendTo($ph);
           }

       });
         $(function() {
        $('#btn').click(function(){
            $('.phone').hide();
            $('#' + $(this).val()).show();
        });
    });

   });
    </script>

<form>
  <select name="prod">
    <option>Brand</option>
    <option>Apple</option>
    <option>HTC</option>
    <option>Nokia</option>
    <option>Samsung</option>
  </select>
  <select name="ph" id="selector">
    <option value="">Model</option>
  </select>
<input type="button" id="btn" value="Show">
</form>
<div class="phone" id="iphone4" style="display:none">iphone4</div>
<div class="phone" id="iphone5" style="display:none">iphone5</div>
Etc...

The conditional select boxes work fine, but try to select "Apple" - how do I display the selected option of #selector when the input button is clicked?

[meek]

I actually managed to solve it by changing the button click function to:

$('#btn').click(function(){
            var selected = $("#selector").val();
            $('.phone').hide();
            $('#' +selected).show();
    });