JavaScript nicht aktualisieren Formular mit Option auswählen

-2

Ich habe ein kleines Problem, ich habe 4 separate Dropdowns, ich möchte eine Option zum Dropdown mit Javascript hinzufügen, auf meinem Arbeitscode (php konstruiert die Dropdowns zunächst mit Wert von MySQL) question_type und question_subtype arbeiten, jedoch option_type option_subtype nicht.JavaScript nicht aktualisieren Formular mit Option auswählen

Da eine Frage mehrere Optionen haben kann, verwende ich quirksmode (http://www.quirksmode.org/dom/domform.html), um neue Dropdowns hinzuzufügen - was wahrscheinlich das Problem ist.

jsfiddle. https://jsfiddle.net/aeqsdzpk/2/

Es gibt keine Fehler, wenn ich auf die Konsole schaue.

Zwei arbeiten ganz gut,

<select name="question_type" id="question_type"> 
    <option value="1">1</option> 
    <option value="2">2 </option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

<select name="question_subtype" id="question_subtype"> 
    <option value="A">A</option> 
    <option value="B">B </option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
</select> 

<select name="option_type[]" id="option_type"> 
    <option value="opt-1">opt1</option> 
    <option value="opt-2">opt2 </option> 
    <option value="opt-3">opt3</option> 
    <option value="opt-4">opt4</option> 
</select> 

<select name="option_subtype[]" id="option_subtype"> 
    <option value="optA">optA</option> 
    <option value="optB">optB </option> 
    <option value="optC">optC</option> 
    <option value="optD">optD</option> 
</select>

Die Javascript Ich verwende hier:

function addOption() 
    { 
    var opt = document.getElementById('options').value, 
    new_option = document.getElementById('new_option').value, 
    option = document.createElement("option"), 
    x = document.getElementById(opt); 
    alert(opt); 
    option.text = new_option; 
    x.add(option); 
    document.getElementById('options').style.display='none'; 
document.getElementById('new_option').value=''; 
}

Hier wird der vollständige Code ist im Fall jsfiddle nicht zugänglich ist

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!-- saved from url=(0042)http://www.quirksmode.org/dom/domform.html --> 
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<title>Sandbox Question Addition Form</title> 
<link rel="stylesheet" href="http://www.quirksmode.org/quirksmode.css"> 
<script type="text/javascript" src="http://www.quirksmode.org/quirksmode.js"></script> 
<style>body {padding-top: 161px;}</style> 
<script type="text/javascript"> 
<!-- 
var counter = 0; 
function init() { 
document.getElementById('moreFields').onclick = moreFields; 
moreFields(); 
} 
function moreFields() { 
counter++; 
var newFields = document.getElementById('readroot').cloneNode(true); 
newFields.id = ''; 
newFields.style.display = 'block'; 
var newField = newFields.childNodes; 
for (var i=0;i<newField.length;i++) { 
    var theName = newField[i].name 
    if (theName) 
     newField[i].name = theName + counter; 
} 
var insertHere = document.getElementById('writeroot'); 
insertHere.parentNode.insertBefore(newFields,insertHere); 
//document.getElementById("moreFields").focus(); 
} 

// --> 
</script> 
<style> 
.button { 
background-color: #4CAF50; /* Green */ 
border: none; 
color: white; 
padding: 4px 8px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
font-size: 16px; 
margin: 4px 2px; 
-webkit-transition-duration: 0.4s; /* Safari */ 
transition-duration: 0.4s; 
cursor: pointer; 
} 
.button1 { 
background-color: white; 
color: black; 
border: 2px solid #4CAF50; 
} 
.button1:hover { 
background-color: #4CAF50; 
color: white; 
    } 
.button2 { 
background-color: white; 
color: black; 
border: 2px solid #008CBA; 
} 
.button2:hover { 
background-color: #008CBA; 
color: white; 
} 
.button3 { 
background-color: white; 
color: black; 
border: 2px solid #f44336; 
} 
.button3:hover { 
background-color: #f44336; 
color: white; 
} 
.button4 { 
background-color: white; 
color: black; 
border: 2px solid #e7e7e7; 
} 
.button4:hover {background-color: #e7e7e7;} 
.button5 { 
background-color: white; 
color: black; 
border: 2px solid #555555; 
} 
.button5:hover { 
background-color: #555555; 
color: white; 
} 
</style> 
</head> 
<body> 
<div id="readroot" style="display: none !important"><p> 
<input class="button button3" type="button" value="Remove Option" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"><br><br> 
<label> Option Type</label><br> 
<select name = option_type[] id = option_type><option value = VIP>VIP 
</option> 
<option value = All>All </option> 
<option value = Boost>Boost </option> 
<option value = Sales>Sales </option> 
</select><br> 
<label> Option Subtype</label><br> 
<select name = option_subtype[] id = option_subtype><option value = Time Item>Time Item </option> 
<option value = All>All </option> 
<option value = Upkeep>Upkeep </option> 
<option value = Titles>Titles </option> 
    <option value = Missing Item (Google)>Missing Item (Google) </option> 
<option value = Missing Prizes (Research)>Missing Prizes (Research) </option> 
</select><br> 
<label>Option Suggestion</label> 
<textarea cols = '100' name = 'option_suggestion[]' placeholder = "Suggested Response" ></textarea> 
    </div> 
    <div> 
<form method="post" action="add_option.php"> 
<label> Question Type</label><br> 
<select name = question_type id = question_type><option value = All>All </option> 
<option value = VIP >VIP </option> 
<option value = Sales>Sales </option> 
<option value = Challenges>Challenges </option> 
<option value = Account>Account </option> 
</select><br> 
<label> Question Subtype</label><br> 
<select name = question_subtype id = question_subtype><option value = > </option> 
    <option value = Time Item>Time Item </option> 
    <option value = Missing Item (Google)>Missing Item (Google) </option> 
    </select><br> 
    <textarea cols = '100' name = 'question' placeholder="Enter Question here" ></textarea> 
<span id="writeroot"></span> 
    <br> 
    <input class="button button1" type="button" id="moreFields" value="New Option"><br> 
    <input type="submit" class="button button2" value="Send form"> 

</form> 
<h3>Add New Question or Option Type </option> 
    <script> 
    function showOptions() 
    { 
     document.getElementById('options').style.display='block'; 
} 
    function addOption() 
{ 
var opt = document.getElementById('options').value, 
new_option = document.getElementById('new_option').value, 
option = document.createElement("option"), 
x = document.getElementById(opt); 
alert(opt); 
option.text = new_option; 
x.add(option); 
document.getElementById('options').style.display='none'; 
document.getElementById('new_option').value=''; 
} 
</script> 
<input type = 'text' id = 'new_option' onchange = 'showOptions()'> 
<select name = 'dropdown' id ='options' style = 'display:none' onchange = 'addOption()'> 
<option selected disabled value = ''>Add to... </option> 
<option value = 'question_type'>Question Type </option> 
<option value = 'question_subtype'>Question Sub Type </option> 
    <option value = 'option_type'>Option Type </option> 
    <option value = 'option_subtype'>Option Sub Type </option> 
</select>

Quelle

2016-07-14 itsjustcarlos

Ihr Code sieht unvollständig aus. Ich sehe keine # Optionen oder wo 'addOption' aufgerufen wird. –

@ DanielA.White der vollständige Code ist in der JSFiddle – JamieD77

der vollständige Code * sollte * hier für eine [mcve] –

Manchmal müssen Sie wegtreten und etwas überdenken und es in einem anderen Format sehen, erinnert an getElementsByClassName.

function addOption() 
{ 
var opt = document.getElementById('options').value, 
new_option = document.getElementById('new_option').value, 
option = document.createElement("option"), 
x = document.getElementsByClassName(opt); 
console.log(x); 
option.text = new_option; 
var arrayLength = x.length; 
for(c=0;c<arrayLength;c++) 
{ 
    x[c].add(option); 

    } 
// x.add(option); 
document.getElementById('options').style.display='none'; 
document.getElementById('new_option').value=''; 
}

Quelle

2016-07-14 21:16:23 itsjustcarlos

JavaScript nicht aktualisieren Formular mit Option auswählen

Antwort

Verwandte Themen