www.webdeveloper.com
Results 1 to 2 of 2

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

  1. #1
    Join Date
    Dec 2004
    Posts
    88

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

  2. #2
    Join Date
    Dec 2004
    Posts
    88
    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();
        });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles