JavaScript onchange功能不起作用 [英] JavaScript onchange function doesn't work
本文介绍了JavaScript onchange功能不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这个javascript应该改变下拉的HTML以及改变相应div的内容。第一次点击改变了下拉的html，但你不能改变它，以及你失去了下拉的小箭头，让用户知道它的下拉。填充复选框不填充div，因为我不知道如何让JavaScript让我放/删除复选框
JAVASCRIPT：
function changeSelection（）{
var x = document.getElementById（populateSelection）。id;
if（x ==selectionViews）{
document.getElementById（dropdownMenuSelect）。innerHTML =Views;
document.getElementById（populateCheckBoxes）。innerHTML =;
} else {
document.getElementById（dropdownMenuSelect）。innerHTML =Tables;
document.getElementById（unpopulateCheckBoxes）。innerHTML =;
}
populateCheckBoxes应该有这些复选框，当表单选按钮被选中，并且当unpopulaeCheckBoxes单选按钮被选中时，div将为空。我没有任何代码，因为我相信它应该是在JavaScript中，但粘贴，显然不工作
< ; div class =checkbox>
< label>
< input type =checkboxid =selectionConditionchecked /> 50 million
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxid =selectionDistribution/> 100 million
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxid =selectionProgram/>状态
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxid =selectionTreatment/> Do Nothing
< / label>
< / div>
HTML：
应该改变的下拉菜单以及应该改变的2个div
< form role =form>
< div class =row>
< div class =radio col-xs-2id =populateSelectiononchange =changeSelection（）>
< label>
< input type =radioname =optradioid =selectionTables/>使用表格
< / label>& nbsp;& nbsp;
< label>
< input type =radioname =optradioid =selectionViews/>使用视图
< / label>
< / div>
< div class =dropdown col-xs-10>
<！ - DROPDOWN BUTTON - >
Views
< span class =caret>< / span>
< / button>
<！ - DROPDOWN MENU - >
< li role =presentation>< a role =menuitemtabindex = - 1class =link-no-jumphref =＃graphOneChart> Chart< / a> < /锂>
< li role =presentation>< a role =menuitemtabindex = - 1class =link-no-jumphref =＃graphOneData> Data< / a> < /锂>
< / ul>
< / div>
< / div>
< div class =rowid =populateCheckBoxes>< / div>
< div class =rowid =unpopulateCheckBoxes>< / div>
< / form>
这里是工作代码，它非常简单，但工作方式相同， http://codepen.io/MarkBond/pen/JdOZaw?editors=101 。顺便说一句，这是用bootstrap完成的。 解决方案
覆盖你的整个问题，我想你想要这样：
更新了整个答案：
$ b
HTML b
< div class =radio col-xs-2id =populateSelectiononchange =changeSelection（）>
< label>
< input type =radioname =optradioid =selectionTables/>使用表格
< / label>& nbsp;& nbsp;
< label>
< input type =radioname =optradioid =selectionViews/>使用视图
< / label>
< / div>
删除ul内的内容并动态添加它：
< div class =dropdown col-xs-10>
<！ - DROPDOWN BUTTON - >
Views
< span class =caret>< / span>
< / button>
< / div>
JS / JQuery
function changeSelection（）{
if（document.getElementById（selectionTables）。checked）{
var x = document.getElementById （ dropdownMenuSelect）;
var text =表;
text + =< span class ='caret'>;
text + =< / span>;
x.innerHTML = text;
document.getElementById（populateCheckBoxes）。innerHTML =;
var y = document.getElementById（dropdown-menu）;
var text2 =< li role ='presentation'>< a role ='menuitem'tabindex =' - 1'class ='link-no-jump'href ='＃graphOneChart'> ;
text2 + =图1;
text2 + =< / a>< / li;
text2 + =< li role ='presentation'>< a role ='menuitem'tabindex =' - 1'class ='link-no-jump'href ='＃graphOneChart'> ;
text2 + =数据1;
text2 + =< / a>< / li;
y.innerHTML = text2;
} else {
var x = document.getElementById（dropdownMenuSelect）;
var text =Views;
text + =< span class ='caret'>;
text + =< / span>;
x.innerHTML = text;
document.getElementById（unpopulateCheckBoxes）。innerHTML =;
var y = document.getElementById（dropdown-menu）;
var text2 =< li role ='presentation'>< a role ='menuitem'tabindex =' - 1'class ='link-no-jump'href ='＃graphOneChart'> ;
text2 + =图表2;
text2 + =< / a>< / li;
text2 + =< li role ='presentation'>< a role ='menuitem'tabindex =' - 1'class ='link-no-jump'href ='＃graphOneChart'> ;
text2 + =数据2;
text2 + =< / a>< / li;
y.innerHTML = text2;
}
}
This javascript is supposed to change the drop down's HTML as well as change the content of the corresponding div's. The first click changes the dropdown html but you cant change it back as well as you lose the little arrow on the dropdown that let users know its a dropdown. The populate checkboxes doesnt populate the div because i dont know how to make javascript let me put/remove check boxes
JAVASCRIPT:
function changeSelection() {
var x = document.getElementById("populateSelection").id;
if (x == "selectionViews") {
document.getElementById("dropdownMenuSelect").innerHTML = "Views";
document.getElementById("populateCheckBoxes").innerHTML = "";
} else {
document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
document.getElementById("unpopulateCheckBoxes").innerHTML = "";
}
}
the populateCheckBoxes is supposed to have these check boxes when the tables radio button is checked, and when the unpopulaeCheckBoxes radio button is checked the div will be empty. I dont have this code in anything yet because i believe its supposed to be in the javascript but pasting that in obviously doesnt work
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" checked/>50 million
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution"/>100 million
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram"/>Status Quo
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment"/>Do Nothing
</label>
</div>
HTML:
This html holds the drop down that is supposed to change and the 2 divs that are supposed to change
<form role="form">
<div class="row">
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<div class="dropdown col-xs-10">
<!--DROPDOWN BUTTON-->
<button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
Views
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect">
<!--DROPDOWN MENU-->
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneChart">Chart</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneData">Data</a></li>
</ul>
</div>
</div>
<div class="row" id="populateCheckBoxes"></div>
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
here is the working code, its pretty plain, but works the same way, http://codepen.io/MarkBond/pen/JdOZaw?editors=101. BTW this is done with bootstrap
解决方案
Covering your whole Question, I think you want like this:
Updated the whole Answer:
HTML
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
Removed content inside ul and dynamically adding it:
<div class="dropdown col-xs-10">
<!--DROPDOWN BUTTON-->
<button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
Views
<span class="caret"></span>
</button>
<ul id="dropdown-menu" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect"></ul>
</div>
JS/JQuery
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
var x = document.getElementById("dropdownMenuSelect");
var text = "Tables ";
text += "<span class='caret'>";
text += "</span>";
x.innerHTML = text;
document.getElementById("populateCheckBoxes").innerHTML = "";
var y = document.getElementById("dropdown-menu");
var text2 = "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
text2 += "Chart 1";
text2 += "</a></li";
text2 += "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
text2 += "Data 1";
text2 += "</a></li";
y.innerHTML = text2;
} else {
var x = document.getElementById("dropdownMenuSelect");
var text = "Views ";
text += "<span class='caret'>";
text += "</span>";
x.innerHTML = text;
document.getElementById("unpopulateCheckBoxes").innerHTML = "";
var y = document.getElementById("dropdown-menu");
var text2 = "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
text2 += "Chart 2";
text2 += "</a></li";
text2 += "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
text2 += "Data 2";
text2 += "</a></li";
y.innerHTML = text2;
}
}
这篇关于JavaScript onchange功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
