SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I make label of select box show options list on focus?

    I am want to not show my select box - just have a button that says "color" and when I click it the options list appears - I select and then I am done. The select box is not shown to the user - it would be hidden off screen. Possible?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by extravaganza View Post
    I am want to not show my select box - just have a button that says "color" and when I click it the options list appears - I select and then I am done. The select box is not shown to the user - it would be hidden off screen. Possible?
    There would be a problem though in that scripting cannot show the options of a select box. It might be possible to use a hidden multiple-select which is revealed, and then hidden again after a selection is made, but that tends to get trickier.

    You start with the elements that you are going to be working with:

    HTML Code:
    <button id="colourbutton">Color</button>
    <select multiple="multiple" id="colourchoice">
        <option>Pink</option>
        <option>LightGreen</option>
        <option>LightBlue</option>
    </select>
    and a CSS class that will be used to hide certain parts:

    Code css:
    .hidden {
        display: none;
    }

    and you start with the colour choices being hidden:

    Code javascript:
    document.getElementById('colourchoice').className = 'hidden';

    When the button is pressed, you hide the button and show the colour list:

    Code javascript:
    document.getElementById('colourbutton').onclick = function () {
        var button = this,
            colorList = document.getElementById('colourchoice');
     
        button.className = 'hidden';
        colorList.className = '';
    };

    When a colour is chosen, you hide the colour list and show the button again. You can also do something with that selected colour:

    Code javascript:
    document.getElementById('colourchoice').onclick = function () {
        var button = document.getElementById('colourbutton'),
            colorList = this,
            index = this.selectedIndex,
            colour = this.options[index].value;
     
        button.className = '';
        colorList.className = 'hidden';
     
        doSomethingWithColour(colour);
    };

    Which may be to set the button's background colour:

    Code javascript:
    function doSomethingWithColour(colour) {
        var button = document.getElementById('colourbutton');
     
        button.style.backgroundColor = colour;
    }

    Here it is in action - http://jsfiddle.net/pmw57/yzeT8/2/
    Last edited by paul_wilkins; Apr 8, 2013 at 14:43. Reason: added opening brace to doSomethingWithColour function
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    There are quite a few references between those functions to different elements though, so a tidy up can be to let the button and the select list be able to easily refer to each other.

    Code javascript:
    var button = document.getElementById('colourbutton'),
        list = document.getElementById('colourchoice');
     
    button.list = list;
    list.button = button;

    Now we can update the functions so that those absolute references can now be removed.

    Code:
    buttondocument.getElementById('colourbutton').onclick = function () {
        var button = this,
            colorList = this.listdocument.getElementById('colourchoice');
         ...
    };
    
    listdocument.getElementById('colourchoice').onclick = function () {
        var button = this.buttondocument.getElementById('colourbutton'),
            colorList = this,
            ...
     
        doSomethingWithColour(colour, button);
    };
    
    function doSomethingWithColour(colour, target) {
        var button = document.getElementById('colourbutton');
     
        targetbutton.style.backgroundColor = colour;
    }
    See the update at http://jsfiddle.net/pmw57/yzeT8/3/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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