Setting selected atrribute onClick with Javascript

Question

My javascript skills are not the best, but I've been working on them lately and one thing I wanted to do was set attributes for html option tags. I posted the project on jfiddle to make it a little easier to see. You can see that here. I think I'm just one line of code off or something.

How would I remove the selected attribute from option 2 and create the selected attribute for option 1? In other words so that when I open 'another-popup', option 1 is selected instead of option 2.

I recommend you check out the jsFiddle link, but I posted the code on this question as well. The javascript for the update link:

function updateSelected(id, removeID, parentID) {
    document.getElementById(parentID).style.display = 'none';
    document.getElementById(id).setAttribute("selected","selected");
    document.getElementById(removeID).removeAttribute("selected")
}

The html:

<a href="#box" rel="popup">Popup</a>

<div id="box" class="popup">
<a href="#another-box" rel="popup" onClick="updateSelected("1", "2", "box");">Another box</a>
</div>
<div id="another-box" class="popup">
<form>
    <select>
        <option id="1">option 1</option>
        <option id="2" selected>option 2</option>
    </select>
</form>
</div>

Thanks for the help

Don't have numeric IDs even though some browsers support it and use single quotes inside double quotes. See console — mplungjan, Apr 02 '13 at 14:53
i have to, because i generate them dynamically with a php loop — , Apr 02 '13 at 14:53
@mplungjan strictly speaking, numeric IDs are an HTML5 feature. — Alnitak, Apr 02 '13 at 14:53
@Alex no you don't have to, just put a prefix on them in your PHP. — Alnitak, Apr 02 '13 at 14:54
oh okay, yeah i mean i do that, i didn't for simplicity sake here, but they all have the id="option-1" or something like that — , Apr 02 '13 at 14:54
@Alex: I updated your JS Fiddle link to point to a version without the minified section of code for readability purposes (the problem might not be *in* that section of the code, but it helps to be able to easily read what's going on in a script). — David Thomas, Apr 02 '13 at 14:55
@Alnitak As I said: "even though some browsers support is" - it is an abomination and will fail on all non-html5 browsers and not fail on html5 browsers if not numeric — mplungjan, Apr 02 '13 at 15:03
@mplungjan sure, browser support is not (yet) universal. But it's hardly an "abomination" - it's a W3C standard feature! — Alnitak, Apr 02 '13 at 15:05
Anything that will fail and which will be misunderstood and abused by mistake is an abomination in my eyes. Since early '90s they forced us to use IDs beginning with letters or select characters and now they for some reason allow numeric IDs which people will fall over time and time again — mplungjan, Apr 02 '13 at 15:10
IMHO your argument only holds true if they had made the change the other way around. _Relaxing_ rules very rarely breaks things, so long as people don't assume those changes are retrospective. — Alnitak, Apr 02 '13 at 15:13

Alnitak · Accepted Answer · 2013-04-02T15:00:42.297

2

To change which entry is selected you should change the .selected property, and not the attribute.

document.getElementById(id).selected = true;

The attribute just sets the initial value of the control, whereas the property sets the current value.

Note that there's also no need to remove the property from the previously selected element. That happens automatically since (by default) only one element may be "selected" at once.

Alternatively, set the .value property on the enclosing <select> to be the same as the value of the desired <option> element. The value will be that of the value attribute on the <option> element, or the contained text if there is no value attribute.

See http://jsfiddle.net/alnitak/C98Wc/

edited Apr 02 '13 at 15:00

answered Apr 02 '13 at 14:55

Alnitak

334,560
70
407
495

okay, i've been trying to make it work but it still wont change it for me. I don't know why. Check out my updated link http://jsfiddle.net/YZ42J/7/ – Apr 02 '13 at 15:09
look in your JS console. It doesn't work because `updateSelected` is wrapped (by jsfiddle) inside an `onLoad` handler and DOM0 handlers have to be global. Change it to `wrap (head)` instead and it works. http://jsfiddle.net/alnitak/MYarB/ – Alnitak Apr 02 '13 at 15:11

Iesus Sonesson · Answer 2 · 2013-04-02T15:04:34.127

0

Like this:

document.getElementById(id).selected=1;//or true

and the other way around is to

document.getElementById(id).selected=0;//or false

@Alnitak - thanks for the correction.

edited Apr 02 '13 at 15:04

answered Apr 02 '13 at 14:54

Iesus Sonesson

854
6
12

`.selected` is a boolean property. – Alnitak Apr 02 '13 at 14:58
@Alnitak from what i have understood this is correct; http://stackoverflow.com/questions/1033944/what-values-can-appear-in-the-selected-attribute-of-the-option-tag – Iesus Sonesson Apr 02 '13 at 15:02
no, you've missed the point. As an _attribute_ you pass a string, but as a _property_ (which is what you have with `.selected`) you pass a _boolean_. – Alnitak Apr 02 '13 at 15:03

score 0 · Answer 3 · answered Apr 02 '13 at 14:56

0

Watch your quotes, try replacing <a> tag with this:

<a href="#another-box" rel="popup" onClick="updateSelected('1', '2', 'box');">Another box</a>

You can't use double quotes within double quotes

answered Apr 02 '13 at 14:56

ulentini

2,413
1
14
26

mplungjan · Answer 4 · 2013-04-02T15:22:19.667

0

Why not use jQuery all the way? Also use single quotes inside your double quotes

FIDDLE

<a href="#another-box" rel="popup" id="another" >Another box</a>


$(function() {
    $('a[rel*=popup]').leanModal({ top : 200, closeButton: ".popup-close" });       
    $("#another").on("click",function(e) {
        updateSelected("o1","box");
        return false; // cancel click - can be e.preventDefault() instead 
    });


});         
function updateSelected(id, parentID) {
    $("#"+parentID).css("display","none"); // or .hide()
    $("#"+id).prop("selected",true);
}

edited Apr 02 '13 at 15:22

answered Apr 02 '13 at 14:57

mplungjan

169,008
28
173
236

there's no need to remove the property from the original entry. Unless it's a "multiselect" they're all mutually exclusive. – Alnitak Apr 02 '13 at 15:01
it's still wrong. `.prop('selected')` requires a _boolean_, not a _string_, and there's no need for a `return false` in a function that isn't an event handler. – Alnitak Apr 02 '13 at 15:15

Setting selected atrribute onClick with Javascript

4 Answers4