如何根据在javascript中选择单选按钮时的下拉列表在文本框中显示相应的值？

我正在创建一个表单，要求使用单选按钮选择学位。根据选择的单选按钮，下拉列表中的值会发生变化。现在，我想根据从下拉列表中选择的选项在文本框中显示一些值

    <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脚本代码：

    <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>

请选择你的学位 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>

}

    <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>

---

<强>

> P>你应该考虑在一个对象中放置你的<代码>选项<代码>，而不是使用一个if语句链，这样不仅更容易查看，而且以后更容易扩展，并且缓存值。

    <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>

(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的示例

    <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>

  textbox.value = "4";        
   }  

else if(dropdown.selectedIndex==4)  

  {

  textbox.value = "6";      
  }  

document.getElementById ("textboxId").value = "value";

(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.
})();