Dynamisch ein Optionsfeld Erstellen zBWie erstellen Sie dynamisch ein Optionsfeld in Javascript, das in allen Browsern funktioniert?
var radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);
Arbeiten in Firefox, aber nicht in IE verwenden. Warum nicht?
zu diesem Beitrag und seine Kommentare Basierend: http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html
folgende Arbeiten. Anscheinend ist das Problem, dass Sie die Namenseigenschaft in IE nicht dynamisch festlegen können. Ich habe auch festgestellt, dass Sie das checked-Attribut auch nicht dynamisch festlegen können.
function createRadioElement(name, checked) {
var radioInput;
try {
var radioHtml = '<input type="radio" name="' + name + '"';
if (checked) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioInput = document.createElement(radioHtml);
} catch(err) {
radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);
if (checked) {
radioInput.setAttribute('checked', 'checked');
}
}
return radioInput;
}
Mein Vorschlag ist nicht document.Create() zu verwenden. Bessere Lösung ist es, tatsächliches HTML zukünftiger Kontrolle zu konstruieren und es dann wie innerHTML einem Platzhalter zuzuweisen - es erlaubt dem Browser, es selbst zu rendern, was viel schneller ist als alle JS DOM Manipulationen.
Prost.
Patrick Antwort funktioniert, oder Sie können die „defaultChecked“ Attribut setzen (dies wird für Radio oder Checkbox-Elemente im IE funktionieren, und nicht Fehler in anderen Browsern verursachen.
PS Liste der Attribute, die Sie in IE kann, ist hier nicht gesetzt aufgeführt:
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html
einen Schritt von dem, was Patrick schlägt vor, einen temporären Knoten verwenden, können wir die try/catch loszuwerden:
function createRadioElement(name, checked) {
var radioHtml = '<input type="radio" name="' + name + '"';
if (checked) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
var radioFragment = document.createElement('div');
radioFragment.innerHTML = radioHtml;
return radioFragment.firstChild;
}
Hier ist ein Beispiel für allgemeinere Lösung, die IE erkennt vorne und übernimmt andere Attribute IE hat auch Probleme mit, aus DOMBuilder extrahiert:
var createElement = (function()
{
// Detect IE using conditional compilation
if (/*@cc_on @*//*@if (@_win32)!/*@end @*/false)
{
// Translations for attribute names which IE would otherwise choke on
var attrTranslations =
{
"class": "className",
"for": "htmlFor"
};
var setAttribute = function(element, attr, value)
{
if (attrTranslations.hasOwnProperty(attr))
{
element[attrTranslations[attr]] = value;
}
else if (attr == "style")
{
element.style.cssText = value;
}
else
{
element.setAttribute(attr, value);
}
};
return function(tagName, attributes)
{
attributes = attributes || {};
// See http://channel9.msdn.com/Wiki/InternetExplorerProgrammingBugs
if (attributes.hasOwnProperty("name") ||
attributes.hasOwnProperty("checked") ||
attributes.hasOwnProperty("multiple"))
{
var tagParts = ["<" + tagName];
if (attributes.hasOwnProperty("name"))
{
tagParts[tagParts.length] =
' name="' + attributes.name + '"';
delete attributes.name;
}
if (attributes.hasOwnProperty("checked") &&
"" + attributes.checked == "true")
{
tagParts[tagParts.length] = " checked";
delete attributes.checked;
}
if (attributes.hasOwnProperty("multiple") &&
"" + attributes.multiple == "true")
{
tagParts[tagParts.length] = " multiple";
delete attributes.multiple;
}
tagParts[tagParts.length] = ">";
var element =
document.createElement(tagParts.join(""));
}
else
{
var element = document.createElement(tagName);
}
for (var attr in attributes)
{
if (attributes.hasOwnProperty(attr))
{
setAttribute(element, attr, attributes[attr]);
}
}
return element;
};
}
// All other browsers
else
{
return function(tagName, attributes)
{
attributes = attributes || {};
var element = document.createElement(tagName);
for (var attr in attributes)
{
if (attributes.hasOwnProperty(attr))
{
element.setAttribute(attr, attributes[attr]);
}
}
return element;
};
}
})();
// Usage
var rb = createElement("input", {type: "radio", checked: true});
Die vollständige DOMBuilder Version auch Ereignis-Listener-Registrierung und Angabe der untergeordneten Knoten Griffe .
Warum nicht die Eingabe erstellen, legen Sie den Stil zu dispaly: keine und dann ändern Sie die Anzeige bei Bedarf auf diese Weise können Sie wahrscheinlich auch mit Benutzern ohne js besser umgehen.
Persönlich würde ich selbst Knoten nicht erstellen. Wie Sie bemerkt haben, gibt es einfach zu viele browserspezifische Probleme. Normalerweise verwende ich Builder.node von script.aculo.us. Mit diesem Code würde wie folgt sein:
Builder.node('input', {type: 'radio', name: name})
Schnelle Antwort auf einen älteren Beitrag:
Der Beitrag oben durch Roundcrisis ist in Ordnung, wenn und nur wenn, wissen Sie, die Anzahl der Radio/Checkbox Kontrollen das wird vorher verwendet werden. In einigen Situationen, die unter diesem Thema "Dynamische Erstellung von Optionsfeldern" behandelt werden, ist die Anzahl der Steuerelemente, die vom Benutzer benötigt werden, nicht bekannt. Darüber hinaus empfehle ich nicht, das "try-catch" -Fehlerabfangen zu überspringen, da dies die Erfassung zukünftiger Browser-Implementierungen erleichtert, die möglicherweise nicht den aktuellen Standards entsprechen. Von diesen Lösungen empfehle ich die von Patrick Wilkes in seiner Antwort auf seine eigene Frage vorgeschlagene Lösung.
Dies wird hier in dem Bemühen, wiederholt um Verwirrung zu vermeiden:
function createRadioElement(name, checked) {
var radioInput;
try {
var radioHtml = '<input type="radio" name="' + name + '"';
if (checked) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioInput = document.createElement(radioHtml);
} catch(err) {
radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);
if (checked) {
radioInput.setAttribute('checked', 'checked');
}
}
return radioInput;}
Meine Lösung:
html
head
script(type='text/javascript')
function createRadioButton()
{
var newRadioButton
= document.createElement(input(type='radio',name='radio',value='1st'));
document.body.insertBefore(newRadioButton);
}
body
input(type='button',onclick='createRadioButton();',value='Create Radio Button')
Dynamisch erstellte Radiobutton in javascript:
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”RadioDemo.aspx.cs” Inherits=”JavascriptTutorial.RadioDemo” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<script type=”text/javascript”>
/* Getting Id of Div in which radio button will be add*/
var containerDivClientId = “<%= containerDiv.ClientID %>”;
/*variable count uses for define unique Ids of radio buttons and group name*/
var count = 100;
/*This function call by button OnClientClick event and uses for create radio buttons*/
function dynamicRadioButton()
{
/* create a radio button */
var radioYes = document.createElement(“input”);
radioYes.setAttribute(“type”, “radio”);
/*Set id of new created radio button*/
radioYes.setAttribute(“id”, “radioYes” + count);
/*set unique group name for pair of Yes/No */
radioYes.setAttribute(“name”, “Boolean” + count);
/*creating label for Text to Radio button*/
var lblYes = document.createElement(“lable”);
/*create text node for label Text which display for Radio button*/
var textYes = document.createTextNode(“Yes”);
/*add text to new create lable*/
lblYes.appendChild(textYes);
/*add radio button to Div*/
containerDiv.appendChild(radioYes);
/*add label text for radio button to Div*/
containerDiv.appendChild(lblYes);
/*add space between two radio buttons*/
var space = document.createElement(“span”);
space.setAttribute(“innerHTML”, “  ”);
containerDiv.appendChild(space);
var radioNo = document.createElement(“input”);
radioNo.setAttribute(“type”, “radio”);
radioNo.setAttribute(“id”, “radioNo” + count);
radioNo.setAttribute(“name”, “Boolean” + count);
var lblNo = document.createElement(“label”);
lblNo.innerHTML = “No”;
containerDiv.appendChild(radioNo);
containerDiv.appendChild(lblNo);
/*add new line for new pair of radio buttons*/
var spaceBr= document.createElement(“br”);
containerDiv.appendChild(spaceBr);
count++;
return false;
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:Button ID=”btnCreate” runat=”server” Text=”Click Me” OnClientClick=”return dynamicRadioButton();” />
<div id=”containerDiv” runat=”server”></div>
</div>
</form>
</body>
</html>
(source)
for(i=0;i<=10;i++){
var selecttag1=document.createElement("input");
selecttag1.setAttribute("type", "radio");
selecttag1.setAttribute("name", "irrSelectNo"+i);
selecttag1.setAttribute("value", "N");
selecttag1.setAttribute("id","irrSelectNo"+i);
var lbl1 = document.createElement("label");
lbl1.innerHTML = "YES";
cell3Div.appendChild(lbl);
cell3Div.appendChild(selecttag1);
}
Willkommen bei stackoverflow. Erwägen Sie, Ihrer Antwort eine Erklärung hinzuzufügen. –
Lone Link ist [eine schlechte Antwort betrachtet] (http://stackoverflow.com/faq#deletion), da es sinnlos ist für sich allein und Zielressource wird in Zukunft nicht mehr am Leben sein garantiert. Bitte versuchen Sie, mindestens eine Zusammenfassung der Informationen, auf die Sie verlinken, hinzuzufügen. – j0k
Wird containerDivClientId verwendet? – HeyWatchThis