![](/img/trans.png)
[英]For a particular selected value from a drop-down box, Display its corresponding values in drop down list?
[英]How to display the corresponding values in the text box depending on drop down list on selecting radio button in javascript?
我正在创建一个表格,要求使用单选按钮选择学位。 根据选择的单选按钮,下拉列表中的值会更改。 现在,我想在文本框中显示一些值,具体取决于从下拉列表中选择的选项。
在这里,我可以在选择单选按钮时更改下拉列表中的值,但在从下拉菜单中选择值时无法在文本框中显示。 这是我的Java脚本代码:
请选择您的学位UG PG
<fieldset id="branch"> <legend>Please select your degree</legend> <select name="branch" id="degreepg" size="1"> <option value="00">Select Degree First</option> </select> </fieldset> <fieldset id="semester"> <legend>Semester</legend> <input type="text" name="semester" id="textbox" size="1"/> </fieldset> </div>
Java脚本功能:
函数SetbranchBydegree(degree){var dropdown = document.getElementById(“ degreepg”);
switch (degree.value) { case 'UG': { dropdown.options.length = 0; dropdown.options[dropdown.options.length] = new Option('Select One','0'); dropdown.options[dropdown.options.length] = new Option('B.Tech','1'); dropdown.options[dropdown.options.length] = new Option('B.E','2'); break; } case 'PG': { dropdown.options.length = 0; dropdown.options[dropdown.options.length] = new Option('Select One','0'); dropdown.options[dropdown.options.length] = new Option('M.Tech','3'); dropdown.options[dropdown.options.length] = new Option('MCA','4'); break; } default:{ dropdown.options.length = 0; dropdown.options[dropdown.options.length] = new Option('Select Degree First','00'); break; } } if(dropdown.selectedIndex==1) { textbox.value = "8"; }
else if(dropdown.selectedIndex==2)
{
textbox.value = "8"; }
else if(dropdown.selectedIndex==3)
{
textbox.value = "4"; }
else if(dropdown.selectedIndex==4)
{
textbox.value = "6"; }
}
document.getElementById ("textboxId").value = "value";
您应该考虑将Options
放在对象中,而不是使用if语句链,这不仅易于查看,而且以后扩展也很容易,并且您正在缓存值。
(function() {
var options = {
UG: [
new Option('Select One', '0'),
new Option('B.Tech', '1'),
new Option('B.E', '2')],
PG: [
new Option('Select One', '0'),
new Option('M.Tech', '3'),
new Option('M.C.A', '4')],
fallback: [
new Option('Select Degree First', '00')]
}
var SetBranchBydegree = function(degree) {
var dropdown = document.getElementById("degreepg");
if (options[degree] !== undefined) {
dropdown.options = options[degree];
} else {
dropdown.options = options.fallback;
}
}
var init = function() {//Setup listeners
$("#gereepg").change(function(event) {
var textBox = $("#textbox"), //The textbox with id textbox
index = event.target.index;//selected index
if (index == 1 || index == 2) {
textbox.val("8");
}
else if (index == 3) {
textbox.val("4");
}
else if (index == 4) {
textbox.val("6");
}
});
}
$(document).ready(init);//run the init method when the site has loaded.
})();
要更改文本框的值,您需要侦听select的onChange事件。 只需添加属性onChange =“ javascriptMethod(this)”即可完成此操作,但是通常不建议这样做,因为它会导致全局范围污染。 上面是使用jQuery的示例;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.