怪癖模式 - JavaScript 不会更新表单选择选项
quirks mode - JavaScript doesn't update form select with option
我有一个小问题，我有 4 个单独的下拉列表，我想在我的工作代码上使用 javascript 在下拉列表中添加一个选项（php 最初使用 MySQL 的值构造下拉列表）question_type和question_subtype工作，但option_type option_subtype没有。
由于一个问题可能有多个选项，我正在使用 quirksmode （http://www.quirksmode.org/dom/domform.html） 来添加新的下拉列表——这可能是问题所在。
https://jsfiddle.net/aeqsdzpk/2/
当我查看控制台时没有错误。
两个工作正常，
<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>
我正在使用的Javascript在这里：
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='';
}
这是完整的代码，以防 jsfiddle 无法访问
<!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>
有时，你需要离开并重新思考事物并以不同的格式查看它，记住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='';
}
相关文章：
- AJAX-按钮提交以更新表单
- 当我尝试在django中更新表单时，会遇到这种类型的问题
- 创建一个动态更新表单，从 MYSQL 数据库采购
- j查询更新表单元素
- 基于另一个表单字段更新表单域
- 如何使用ajax更新表单结构
- 在传单地图上设置并拖动标记可更新表单输入字段，而无需发送
- 使用javascript自动更新表单
- 更新表单元素而不提交(Ajax+JS）
- JavaScript未更新表单操作
- 使用Ajax.BeginForm更新表单
- 如何更新表单中表示的JSON对象
- 可以在填写表单时更新表单，而无需单击提交按钮
- 如何获得'id'在更新表单中显示数据
- 在React中更新表单状态的正确方法
- PHPMYSQLAJAX(?) -如何在不调用页面刷新的情况下动态更新表单
- 用Django动态更新表单
- 使用Ajax, PHP, MYSQL更新表单
- Chrome应用程序-手动更新表单内的应用程序
- 将表单数据提交给Highcharts addPoint方法以动态更新表单
