Sunday, March 9, 2014

how to show the value that is selected in drop down menu by the user using javascript

 <select name="place" id="place" onchange="spk();">
<option></option>
<option value="1">California</option>
<option value="2">New York</option>
<option value="3">Las Vegas</option>
<option value="4">Texas</option>
<option value="5">Ohio</option>
</select>

<div id="speak"></div>

<script>
function spk(){
    var b = document.getElementById("place");
    var c = b.options[b.selectedIndex].value; // this shows the selected option's value
    var d = b.options[b.selectedIndex].text; // this shows the selected option's text
    var e = "You have selected ";
    document.getElementById("speak").innerHTML = e.concat(d);
}
</script>

load dynamic forms based on drop down selected by user

hi,
well there are many ways of doing this. i have done it the following way:-
HTML
<div id="spc">
<select id="selectform" onChange="selfo();">
<option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>  
</select>
      <form id="abc" style="display:none">
      <input>
      </form>
      <form id="def" style="display:none">
      <input><input>
      </form>
      <form id="ghi" style="display:none">
      <input><input><input>
      </form>
      </div>

//javascript
    <script>
function selfo()
{
var a = document.getElementById("selectform").value;
if(a == 1){
document.getElementById("abc").style.display = "block";
document.getElementById("def").style.display = "none";
document.getElementById("ghi").style.display = "none";
}
else if(a == 2){
document.getElementById("def").style.display = "block";
document.getElementById("abc").style.display = "none";
document.getElementById("ghi").style.display = "none";
}
else if(a == 3){
document.getElementById("ghi").style.display = "block";
document.getElementById("abc").style.display = "none";
document.getElementById("def").style.display = "none";
}
else if(a == 0){
document.getElementById("spc").style.display = "none";
}
}
    </script>