javascript - javascriptでラジオボタンを選択する際のドロップダウンリストに応じて、テキストボックスに対応する値を表示する方法は?

Question

ラジオボタンを使用して学位を選択するフォームを作成しています。選択したラジオ ボタンに応じて、ドロップダウン リストの値が変わります。ドロップダウンリストから選択したオプションに応じて、テキストボックスに値を表示したいと思います。

ここでは、ラジオ ボタンを選択するとドロップダウン リストの値を変更できますが、ドロップダウン メニューから値を選択するとテキスト ボックスに表示できません。ここに私の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 スクリプト関数:

function 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('M.C.A','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";      
  }  

}

Answer 1

if ステートメントのチェーンを使用する代わりに、オブジェクトに入れることを検討する必要がOptionsあります。見やすいだけでなく、後で拡張するのも簡単で、値をキャッシュしています。

(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でそれを行う例です。

Answer 2

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

ワーキングデモ