I have created a dropdownlist with the help of Jquery and javascript. In this, when we will enter the text in the field given, that value will be stored and will be added to the next list dynamically. Also We can easily remove all the items by just clicking on the empty button.
<html>
<head id="Head1" runat="server">
<title>Drop-down</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript">
function AddNames(txt) {
var option = document.createElement("option");
option.text = txt.value;
option.value = txt.value;
document.getElementById("sNames").options.add(option);
$(document).ready(function(){
$("button").click(function(){
$("#form1").empty();
});
});
}
function myFunction() {
alert("Your data here Empty");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="imageInputWrapper">
<input id="calendar" type="text" name="name" value=" " onblur="AddNames(this);"/>
<!-- <img src<html>
<head id="Head1" runat="server">
<title>Drop-down</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript">
function AddNames(txt) {
var option = document.createElement("option");
option.text = txt.value;
option.value = txt.value;
document.getElementById("sNames").options.add(option);
$(document).ready(function(){
$("button").click="calendar.png" alt="Click to popup the calendar!" onclick="alert('Popup some calendar here!');"> -->
<hr />
<select id="sNames">
</select>
</div>
<button onclick="myFunction()">Empty All</button>
</form>
</body>
</html>
0 Comment(s)