IE6 option/select problem 1

[cavato]

Hi there

I'm having problem adding options in a select box in IE6.
Tried many examples but can only make it work in Firefox.
The event to trigger the adding of new items, is comming from another dropdownlist.

Have anyone found a solution to add options in IE6?

****

Tried:

var option = document.createElement("OPTION");
list.options.add(option);
option.innerText = "Two";
option.value = "2";

and:

option = document.createElement("option");
select.add(option, 0);
option.value = i;
option.appendChild(document.createTextNode (i));

and:

list.options[list.options.length] = new Option(index + ' year',index);

 

[stinkybee]

try

getform = document.forms['testform']
getselect = getform.testselect
getselect.options[getselect.options.length] = new Option('new text','new value');

where 'testform' is the name of your form and 'testselect' is the name of your select.
'new text' is the text the user sees and 'new value' is the value of the new option.

 

[cavato]

Cannot make it work

IE6 dosn't want me to make a dynamic dropdownlist.

Has anyone made it work?

 

[theniteowl]

cavato, dynamic dropdowns are used all the time in IE6.
But we cannot help you unless you tell us the actual problem rather than just saying it does not work.

Do you get error messages? On the status bar on the bottom left of the IE window does it show the yellow symbol indicating an error? What does it say when you click on it?

Show the current code that you are testing with including the HTML so we can see how your select boxes are setup.


Google, you're my hero!

 

[cavato]

Yes, I couldn't think that it can't work. Thanks for your comments, I'm a beginner in Forums

The problem is, that when another dropdownlist(ddl) has an onchange event, it should trigger the other ddl to make some options. I don't get any errors but no option either.

function getAntalekstraAar(){

var nualder = document.getElementById("nualder").value;
var ddlslutalder = document.getElementById("slutalder");
var slutalderaar = ddlslutalder.value;
var maxalder = 21;
var aar = document.getElementById("antalaar");
var minalder = 7;
aar.options.length = 0;

if(navigator.appName == "Microsoft Internet Explorer") {

getform = document.forms['boerneopsparingForm'];
getselect = getform.aar;
getselect.options[getselect.options.length] = new Option('new text','new value');


}else {
while(minalder <= maxalder) {
if(minalder <= (slutalderaar-nualder))
aar.options[aar.options.length] = new Option(minalder + ' år',minalder);
minalder ++;
}
}
}

 

[theniteowl]

You did not post the HTML to go with it. I managed to figure it out but without the HTML it was much more difficult.

You do not need to do the browser detect for IE6, it works with the same method you used in the else statement.

Try this shortened version.

function getAntalekstraAar() {
  var nualder = document.getElementById("nualder").value; 
  var slutalderaar = document.getElementById("slutalder").value; 
  var maxalder = 21;
  var aar = document.getElementById("antalaar"); 
  var minalder = 7;
  aar.options.length = 0;           

  while(minalder <= maxalder) {
    if(minalder <= (slutalderaar-nualder))
      aar.options[aar.options.length] = new Option(minalder + ' år',minalder);
    minalder ++;
  }
}

Google, you're my hero!

 

[cavato]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:useBean id="vbIn" class="dk.boerneopsparing.beans.Inputbean" scope="session" />

<h1>Børneopsparing</h1>

<section><%@ include file="/content/error.jsp" %></section>

<section>
<form method="post" name="boerneopsparingForm" class="form" action="#">


<fieldset>
<fieldset class="hint">
<h5>
<span>Beregning</span>
</h5>
<label>Månedligt beløb &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;(maks. 250kr.)</label>
<input type="text" id="userfocus" name="mdrbelob" value="<%= vbIn.getMdrBelob() %>" onchange="valider()" />
</fieldset>

<fieldset class="hint">
<label for="N100A4">Barnets alder i dag</label>
<select id="nualder" name="nualder" onchange="getAntalekstraAar()" onblur="getAntalekstraAar()">
<option value="0">0 år</option>
<option value="1">1 år</option>
<option value="2">2 år</option>
<option value="3">3 år</option>
<option value="4">4 år</option>
<option value="5">5 år</option>
<option value="6">6 år</option>
<option value="7">7 år</option>
<option value="8">8 år</option>
<option value="9">9 år</option>
<option value="10">10 år</option>
<option value="11">11 år</option>
<option value="12">12 år</option>
<option value="13">13 år</option>
<option value="14">14 år</option>
</select>

</fieldset>

<fieldset class="hint">
<label>Barnets alder ved bindingsperiodens udløb</label>
<select id="slutalder" name="slutalder" onchange="getAntalekstraAar()" onblur="getAntalekstraAar()">
<option value="14">14 år</option>
<option value="15">15 år</option>
<option value="16">16 år</option>
<option value="17">17 år</option>
<option value="18">18 år</option>
<option value="19">19 år</option>
<option value="20">20 år</option>
<option value="21">21 år</option>
</select>
</fieldset>

<fieldset class="hint">
<label>Antal år der indbetales</label>
<select id="antalaar" name="antalaar">
</select>
</fieldset>

<fieldset class="submit">
<input type="button" name="Beregn" onclick="boerneopspar.hent('/boerneopsparing/beregn',this.form);" value="Beregn" />
</fieldset>

</fieldset>

</form>

</section>

 

[cavato]

I'm using Ajax to get the jsp, could that be the problem?
Tried your version, but no options and no errors at all.

I also tried to change the syntax:
document.forms['boerneopsparingForm'].nualder.value;

With no result

 

[theniteowl]

It could. I have not worked with jsp.
I assume you are storing the function in the jsp file?
Any reason you could not just do an include of a .js file instead? Seems like ajax is a bit overkill for this but I do not know what other reasons you may have for it.

The first thing to do is simplify the code. Just put the function directly onto the page and see if it works, then you will know if it is something to do with the page or if it is something to do with the retrieval of the .jsp file.

Also, you should not do an onchange AND an onblur in your input fields. One or the other should work fine.

I simplified the code by removing the jsp portions, the server-side populated value and removed the onblur events and it works for me under IE6.

Google, you're my hero!

 

[cavato]

The problem is that I use a HTC that dosen't respond to the javascript.

Thank a lot for your help!

 

[theniteowl]

It's early and my brain is still half asleep but I cannot think of what HTC stands for.
You said you could get it working in Firefox so you should be able to get it working in IE as well, the code I posted above should work in both without changes.



Google, you're my hero!

 

[cavato]

Goodmorning

.htc is to add dynamic and style.

The code is now working in both FF and IE