Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

  1.  permalink

    The problem with this one isn't that it's impossible to change the selected option automatically, but rather that the Safari UI doesn't care to reflect the change.

    Here's the js:

    jQuery.fn.selectOptions = function(value) {
        this.each(
            function()  {
                if(this.nodeName.toLowerCase() != "select") return;
                // get number of options
                var optionsLength = this.options.length;
    
                for(var i = 0; i<optionsLength; i++) {
                    this.options[i].selected = false;
                    if (this.options[i].value == value) {
                        this.options[i].selected = true;
                    };
                }
            }
        )
        return this;
    }
    

    Not only do I have to set the initial selected values to false before making the change (that's what the this.options[i].selected = false; is for), but I also have to live with the fact that I have to manually click on the select element to see the change.

    This problem is Safari only, or at least I believe it to be. What do you think?

    • CommentAuthorvarland
    • CommentTimeOct 31st 2007
     permalink
    If you set this.options[i].selected = "selected"; does it work?
  2.  permalink

    Nope. It was the first thing I tried, thinking that the problem would be a simple one.

    • CommentAuthorvarland
    • CommentTimeOct 31st 2007
     permalink
    Have you tried setting up an event handler, and alerting the "selected" property when you click the element? Also, is this for check boxes or select options?
  3.  permalink

    This is for select options. I'll try to illustrate the behaviour in Safari.

    Let's say the select box initially displays the text "First" and has the value of 1. The second option element is "Second" and has the value of 2.

    The script tells Safari to change the selected option to be the "Second". Now, instead of displaying "Second" and having the value 2, it still displays "First" but has actually changed the value to 2. Now if I click the select box, I can see that the check mark is next to "Second".

    I'll try adding the event handler, but I'm pretty sure the results will be the same.

    • CommentAuthorvarland
    • CommentTimeNov 1st 2007
     permalink
    I was able to get Safari to repaint the select box by changing a CSS property of the select each time a different option was selected. Specifically, I added an outline, then immediately removed it. This forces Safari to update the select box, even though I never actually saw the outline. I know it's not a great solution, but it seems to work.
    Thankful People: kari.patila
  4.  permalink

    Well, how about that. It worked when I added

    $("#vari").addClass("outline");
    $("#vari").removeClass("outline");
    

    after calling selectOptions. It's an ugly trick for sure, but a necessary one. Now, if I could do the same by adding some sort of a highlight effect to the select box, there might be a way to get rid of the ugliness as well.

Add your comments
    Username Password
  • Format comments as (Help)