JAVA BY RAMAKRISHNA: 08/14/13

Wednesday, 14 August 2013

JQuery Dropdown List Example

JQuery Dropdown List Example
<html> <head> <script src="jquery.js"></script> <script> $(document).ready(function() { //To clear the selected item from the list $("#bt").click(function() { $("#selId option").attr("selected",false); }); //To get the value of selected item $("#bt1").click(function() { var temp=$("#selId option:selected").val(); alert(temp); }); //To get the text of selected item $("#bt2").click(function() { var temp=$("#selId option:selected").text(); alert(temp); }); //To get the index of selected item $("#bt3").click(function() { var temp=$("#selId option:selected").index(); alert(temp); }); }); </script> </head> <body> <select id="selId"> <option value="">---select---</option> <option value="java">JAVA</option> <option value="c">C</option> <option value="c++">C++</option> <option value="oracle">ORACLE</option> </select> <button id="bt">clear</button> <button id="bt1">selectedValue</button> <button id="bt2">selectedText</button> <button id="bt3">selectedIndex</button> </body> </html>

JQuery Dropdown List Example

<html>
<head>
<script src="jquery.js"></script>
<script>

$(document).ready(function() {
//To clear the selected item from the list
   $("#bt").click(function() {
     $("#selId option").attr("selected",false);
   });

//To get the value of selected item
   $("#bt1").click(function() {
     var temp=$("#selId option:selected").val();
     alert(temp);
   });

//To get the text of selected item
   $("#bt2").click(function() {
     var temp=$("#selId option:selected").text();
     alert(temp);
   });

//To get the index of selected item
   $("#bt3").click(function() {
     var temp=$("#selId option:selected").index();
     alert(temp);
   });

});

</script>
</head>
<body>
<select id="selId">
<option value="">---select---</option>
<option value="java">JAVA</option>
<option value="c">C</option>
<option value="c++">C++</option>
<option value="oracle">ORACLE</option>
</select>
<button id="bt">clear</button>
<button id="bt1">selectedValue</button>
<button id="bt2">selectedText</button>
<button id="bt3">selectedIndex</button>
</body>
</html>