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

Hi.

I have two conditional select boxes:

Code:

---

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

---

HTML Code:

---

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

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

Code:

---

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

---