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>
Posted by at No comments:

Tuesday 13 August 2013

JQuery Check box Example



JQuery Checkbox Example
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {

$("#selectedValue").click(function() {
   var values=[];
   $("input:checkbox[name=lang]:checked").each(function() {
      values.push($(this).val());
   });
for(i=0;i<values.length;i++) {
   alert(values[i]);
}
});
$("#selectedText").click(function() {
   var values=[];
   $("input:checkbox[name=lang]:checked").each(function() {
      values.push($(this).prev().text());
   });
for(i=0;i<values.length;i++) {
   alert(values[i]);
}
});
$("#selectedIndex").click(function() {
   var values=[];
   $("input:checkbox[name=lang]:checked").each(function() {
      values.push($(this).index());
   });
for(i=0;i<values.length;i++) {
    alert(values[i]);
}
});
});
</script>
</head>
<body>
<div>
<label for="telugu">Telugu</label>
<input type="checkbox" name="lang" value="telugu"/>
<label for="english">English</label>
<input type="checkbox" name="lang" value="english"/>
<label for="hindi">Hindi</label>
<input type="checkbox" name="lang" value="hindi"/>
</div>
<button id="selectedValue">Selected Value</button>
<button id="selectedText">Selected text</button>
<button id="selectedIndex">Selected index</button>
</body>
</html>



Posted by at No comments:
Subscribe to: Posts (Atom)