...

View Full Version : Resolved Actually change HTML to say selected="selected"



Masna
10-17-2008, 07:12 AM
Hey everyone. I'm working on a very complex and lengthy algorithm that deals with a variable number of dropdown boxes.

I need to be able to save the modified HTML (after JavaScript has run its course) so that whatever changes made by JavaScript are saved and the HTML can be printed as last modified.

Now, fortunately, JavaScript (in Safari anyway) already removes and adds options using pure HTML, however, when changing the selected index, it doesn't write in the selected parameter.

Does anyone have any quick workarounds for this?

Thanks a lot!

rangana
10-17-2008, 07:20 AM
Could you by chance show us the code wrapped around
tags.

If it's too lengthy, then try to reproduce the problem at a minimal number of codes, so it would be easy to debug.

Hope that makes sense.

Masna
10-17-2008, 07:50 AM
Could you by change show us the code wrapped around
tags.

If it's too lengthy, then try to reproduce the problem at a minimal number of codes, so it would be easy to debug.

Hope that makes sense.


theForm.elements[i].selectedIndex = z;

Trust me, you don't want to see anymore. It's a nightmare (easily one of the most difficult algorithms I've ever programmed).

Anyway, the above code is what's used to change a dropdown's selected index. I need a way to have JavaScript actually plug in "selected" in the option HTML.

rangana
10-17-2008, 08:15 AM
A basic example:


<script type="text/javascript">
window.onload=function()
{
alert('4th Option will be selected');
document.getElementById('myselect').selectedIndex=3; // 4th option
}
</script>
<select id="myselect">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4th Option</option>
<option>5</option>
</select>

rangana
10-17-2008, 08:20 AM
...or you mean to use setAttribute():


<script type="text/javascript">
window.onload=function()
{
var opt=document.getElementById('myselect'); // Drop down id
alert('4th Option will be selected');
opt.options[3].setAttribute('selected','selected'); // 4th option
}
</script>
<select id="myselect">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4th Option</option>
<option>5</option>
</select>

Masna
10-17-2008, 08:50 AM
Will setAttribute actually plug in "selected" for me?

Masna
10-17-2008, 08:57 AM
UPDATE: I tried using setAttribute. It worked, but for some reason it also set a dropdown to selected that shouldn't have been.

I got it all to work using this:


var outerString = theForm.elements[i].options[z].outerHTML;
var innerString = theForm.elements[i].options[z].innerHTML;
var delSplit = outerString.split( ">" + innerString);
var splitTwo = delSplit[0].split(">");
var finalString = splitTwo[0] + " selected>" + innerString + "</option>";
theForm.elements[i].options[z].outerHTML = finalString;

rangana
10-17-2008, 09:05 AM
Will setAttribute actually plug in "selected" for me?

Yes. See testing example:


<script type="text/javascript">
function findAttr(el,attr)
{
var opt=document.getElementById(el),attrFound=false;
for(var i=0;i<opt.options.length;i++)
attrFound=opt.options[i].getAttribute(attr)?true:attrFound;
alert(attrFound?'"'+attr+'" is found.':'"'+attr+'" cannot be found.');
}
function setAttr(el,indx,attr)
{
var el=document.getElementById(el),splt=attr.split('=');
el.options[indx].setAttribute(splt[0],splt[1]);
}
</script>
<select id="myselect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4th Option</option>
<option>5</option>
</select>
<input type="button" value="Find Attribute" onclick="findAttr('myselect','selected')">
<input type="button" value="Set Attribute" onclick="setAttr('myselect',3,'selected=selected')>


For further reading:
http://developer.mozilla.org/en/DOM/element.setAttribute



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum