javascript - Call onchange function from Document.Ready with pre selected item from update -

i have user form contains many option boxes, 1 of them has (onchange()) function hide/show text inputs based on value. in add form every thing works charm, when editing pre-added record, select option populated (selected), selected when adding form, question here, when select record update, can hide/show input boxes based on option box selected value using javascript.

and example of want can found

as many mentioned, it's hard without example code given. i'll still give try.

html:

<select id="select" onchange="toggleinputs()">     <option value="0">option 0</option>     <option value="1">option 1</option>     <option value="2">option 2</option>     <option value="3">option 3</option> </select>  <input type="text" class="toggleinputs" placeholder="input 0" id="inp0"/> <input type="text" class="toggleinputs" placeholder="input 1" id="inp1"/> <input type="text" class="toggleinputs" placeholder="input 2" id="inp2"/> <input type="text" class="toggleinputs" placeholder="input 3" id="inp3"/> 

js:

function toggleinputs() {     // value of select field     var x = document.getelementbyid("select").value;      // id of targeted input field hide     var targetinput = "inp"+x;      // input fields , amount of them     var inputfields = document.getelementsbyclassname("toggleinputs");     var ln = inputfields.length;      // show input fields (by resetting style)     (var i=0; i<ln; i++) {         inputfields[i].setattribute("style", "");     }      // hide targeted input field     document.getelementbyid(targetinput).setattribute("style", "display: none"); } 

in case you're having multiple selects, should group html elements.

html:

<select id="select1" onchange="toggleinputs('select1', 'grp1')">     <option value="0">option 0</option>     <option value="1">option 1</option>     <option value="2">option 2</option>     <option value="3">option 3</option> </select> <div id="grp1">     <input type="text" class="toggleinputs" placeholder="input 0" id="grp1-0"/>     <input type="text" class="toggleinputs" placeholder="input 1" id="grp1-1"/>     <input type="text" class="toggleinputs" placeholder="input 2" id="grp1-2"/>     <input type="text" class="toggleinputs" placeholder="input 3" id="grp1-3"/> </div>  <select id="select2" onchange="toggleinputs('select2', 'grp2')">     <option value="0">option 0</option>     <option value="1">option 1</option>     <option value="2">option 2</option>     <option value="3">option 3</option> </select> <div id="grp2">     <input type="text" class="toggleinputs" placeholder="input 0" id="grp2-0"/>     <input type="text" class="toggleinputs" placeholder="input 1" id="grp2-1"/>     <input type="text" class="toggleinputs" placeholder="input 2" id="grp2-2"/>     <input type="text" class="toggleinputs" placeholder="input 3" id="grp2-3"/> </div> 

js:

function toggleinputs(targetedselect, targetedgrp) {     // value of select field     var x = document.getelementbyid(targetedselect).value;      // id of targeted input field hide     var targetinput = targetedgrp+"-"+x;      // input fields , amount of them     var inputfields = document.getelementsbyclassname("toggleinputs");     var ln = inputfields.length;      // show input fields (by resetting style)     (var i=0; i<ln; i++) {         inputfields[i].setattribute("style", "");     }      // hide targeted input field     document.getelementbyid(targetinput).setattribute("style", "display: none"); } 

haven't tested version multiple selects , input groups, should job.