Change the content of select tag using JQuery

Tue Jan 08, 2013 11:04 pm

Add new option to select dynamically
javascript code

<html>
<head>
<title>Add new option to select dynamically </title>

<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script>
 $(document).ready(function(){
  $("input#btnAdd").click(function(){
 
     alert($('#newOption').attr('value'));
    $('#MyOptions').append(new Option($('#newOption').attr('value'), $('#newOption').attr('value'), true, true));
  //newOption
  
    });
  });
</script>
 
<style type="text/css">
#MyOptions
{
font-weight:bold;
background:#1C32F1;
visibility:visible; 
text-align:center;
text-decoration: underline;
color:yellow;
}
</style>

</head>

<body>
<p>Add new option when you click on the button below:</p>

<input type="button"   value="Add opition" id="btnAdd" />: Country to add: <input type="text" id="newOption" />

 
<select id="MyOptions">
<option></option>
<option value="France">France</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
</select>
</body>
</html>

Change the content of select tag using JQuery

Change the content of select tag using JQuery

Topic Tags