This is related to Adding options to a <select> using jQuery? but has a different focus
My problem is that I am not able to append option-elements to a select in IE8.
When changing the engine to IE7 in IE's developer-tools it does work.
It also works in FF and Chrome.
var valT = "some Text";
var charsToIgnore = 2;
var o = new Option(valT.slice(charsToIgnore), valT);
$(o).html(valT.slice(charsToIgnore));
$('#availablePages').append(o);
another method I tried:
$('<option/>', {value: valT, text: valT}).appendTo("#availablePages");
availablePages is the id of my select. The select does not contain any elements when the page is received by the client. My doctype is <!DOCTYPE html>.
I also tried to remove all other scripts and css from my site to make sure no side-effects apply.
Edit:\ Thanks for downvoting! It's not my fault if provided solutions do not work in all IE8-versions. Since my question was What DOES work in all IE8-versions? it is, from my point of view, understandable that I do not accept answers which do not work for me. As you can see in Adding options to a <select> using jQuery? I am not the only one for whom the other replies here do not work.
Using the Up-/Down-Vote functionalities as channel for your own mood is no good Wiki/QA-behaviour.
This should just do the trick for you:
$('#availablePages').append(new Option(valT.slice(charsToIgnore), valT));
(Tested and working in IE8)
What worked for me
var o = new Option("option text", "value");
$(o).html("option text"); // Without this line it does not work..
$("#availablePages").append(o);
What I also had to change / what one should consider:
display: table; is NOT allowed to be applied. For some reason it breaks everything.
Related
I've implemented the following javascript code to use the autocomplete feature within the text field question in Qualtrics.
Qualtrics.SurveyEngine.addOnReady(function()
{
var textOptions = [
"Adam", "Athelney", "Baring"
];
jQuery('.QR-' + this.questionId).autocomplete({
source: textOptions,
minLength: 3
});
});
The code works; however, the autocomplete suggestions appears at the end of the page (below "Powered by Qualtrics" URL link). See the first screenshot:
I am not sure whether this is a bug within Qualtrics; however, I've tested the same code on an account provided by a different University (see the second screenshot below) where the same code works as expected (the suggestion appears right below the question, not at the end of the page) so I am left puzzled by this behavior.
Any ideas what may cause this behavior and how to resolve it? (both examples don't use any custom CSS or such but they are accounts hosted at two different Universities) Thank you.
Based on the comment above, copy the CSS html.JFEScope body#SurveyEngineBody ul#ui-id-5.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front rule from the working version to the Look&Feel>Custom CSS of the non-working version. The important part is the contents of the rule. Presumably they are different.
Although the classes are in a different order the only difference between the two selectors is the id of the ul element. Make sure you use the correct id (they may be different in the two surveys).
A bit late, but jquery autocomplete looks for .ui-front on a parent element; if it's not set you need to explicitly add a selector with the appendTo option in your custom js code for that questions.
var yourSourceList = ['foo', 'bar', 'baz'],
$elem = jQuery('.QR-'+this.questionId),
$elemParent = $elem.parent();
jQuery($elem).autocomplete({
source: yourSourceList,
minLength:3,
appendTo: $elemParent
});
I'm programmatically changing the option children of a select element with jQuery.
The changes are being applied to the DOM, but are not visible on the screen.
This is what I get on the screen:
And this is what I see when I inspect the select element:
Here is the code that I use to update the select element:
select.empty();
$.each(this.entries, function() {
var option = $$("<option/>");
option.attr("value", this.value);
option.text(this.label);
select.append(option);
});
This clearly seems like a bug to me. Can anybody tell me what is wrong with this or indicate a workaround ?
Note: for reasons beyond my control, the page is in quirks mode.
The documentation for the SelectElement is here: https://developer.mozilla.org/en-US/docs/DOM/HTMLSelectElement
You can add options like this:
$("#sel")[0].options.add(new Option("test", "123")); //haven't tested all browsers
The docs say that you call add on the select element itself, passing in an option node:
$("#sel")[0].add($("<option>").val("456").prop("text", "Test2")[0], null);
both tested (and working) in IE8 here: http://jsfiddle.net/82gCq/2/
Note — The docs for HTMLOptionsCollection does not specify an add method, so it is not standardized, and its implementation will be left to the browser (if they implement it at all).
The good news is that $("#sel")[0].add(new Option("test3", "789")); works in IE8, and should work in other browsers as well.
Try changing
var option = $$("<option/>");
to
var option = $("<option></option>");
I removed the double dollar sign (I believe that was a typo), and changed the option element to not use the self-closing syntax. I've run into issues using self-closing tags on certain elements (script,textarea,iframe), this could be another example of where a self-closing tag could be a problem.
I saw a few posts similar to my problem and tried the solutions offered, but I'm still having issues with IE8 & IE9 and 'selectedIndex'. This code returns my variable answerSubmitted as 'undefined':
var answerSubmitted = document.getElementById("DropDown-Answers").selectedIndex;
The above works perfectly in all other browsers. Based on another post here, I also tried this:
var answerSubmitted = document.getElementById("DropDown-Answers").value;
Still the same results - works elsewhere, but not in IE8 or IE9. I've verified that IE is recognizing that particular element by its ID.
Any guidance here?
MORE INFO:
I'm creating the drop down menu dynamically by going thru a loop and adding variable text between the option and /option tags, like so (note that 'tempRandom' is a random number updated each time thru the loop):
tempMenuText = tempMenuText + "<option>" + Answers[tempRandom] + "</option>";
The results are surrounded by the form an select tags, then I update the innerHTML of my element. This works and generates a working drop down menu. But... perhaps this is a clue: when I put a test with the innerHTML of the menu element into another element to view it, it shows as empty. It's as though IE is not seeing that there is HTML in the element, thinks it is null, and therefore 'selectedIndex' fails as null.
This is solved. It turns out it was my error in how I was referring to the ID of the selected item. An associate explained that .selectedIndex only works (in IE, at least), when the ID within the 'select' tag is correct. If not, it returns null, which is what was originally happening. All is good now. Thanks for the suggestions.
document.getElementById("row").innerHTML = "";
This causes IE to raise "Unknown runtime error".
I know this is a known bug, but is there any workaround (except the obvious using a div instead).
Works fine in all other browsers.
Instead of "nuking" the row like that, just hide it:
document.getElementById("row").style.display = "none";
Same final result (row will disappear from view) without messing too much with the DOM.
Edit: another way to "clear" the element is:
var row = document.getElementById("row");
while (row.childNodes.length > 0)
row.removeChildNode(row.childNodes[0]);
Should be as cross browser as possible - live example.
can you provide the HTML code you use? Is there a reason you can't use jQuery?
maybe you could use:
document.getElementById('table1').deleteRow(_row.rowIndex);
I've got the following jQuery code for getting the first character of the string value of the selected option of an html select box.
var mode = $("#mode :selected").text()[0];
"mode" is the id of the html select element I want. This is not working in IE at the moment - does anyone know why that might be?
EDIT: Sorry everyone, it was nothing to do with jQuery. IE just wanted
var mode = $("#mode :selected").text().charAt(0);
I'm not sure why I thought the [0] would work in the first place. Thanks anyway.
maybe the problem is with not specifying the 'option'
we use this code in several of our projects and this does work in IE
$("#ComboBox option:selected").text()