Add value to the Drop Down List using JS


function addNewListItem()
{
     var htmlSelect = document.getElementById('selectYear');
     var optionValue = document.getElementById('txtYearValue');
     var optionDisplaytext = document.getElementById('txtYearDisplayValue');
     if (optionValue.value == '' || isNaN(optionValue.value))
    {
          alert('please enter option value');
           optionValue.focus();
           return false;
    }
    if (optionDisplaytext.value == '' || isNaN(optionDisplaytext.value))
   {
          alert('please enter option display text');
          optionDisplaytext.focus();
          return false;
   }
    if (isOptionAlreadyExist(htmlSelect, optionValue.value))
   {
          alert('Option value already exists');
          optionValue.focus();
          return false;
    }
    if (isOptionAlreadyExist(htmlSelect, optionDisplaytext.value))
    {
          alert('Display text already exists');
          optionDisplaytext.focus();
          return false;
     }
      var selectBoxOption = document.createElement("option");
      selectBoxOption.value = optionValue.value;
      selectBoxOption.text = optionDisplaytext.value;
       htmlSelect.options.add(selectBoxOption);
      alert("Option has been added successfully");
      return true;
}

function isOptionAlreadyExist(listBox, value)
 {
       for (var x = 0; x < listBox.options.length; x++)
      {
                if (listBox.options[x].value == value || listBox.options[x].text == value)
                {
                       return true;
                }
       }
       return false;
}

</script>

<asp:DropDownList ID="selectYear" runat="server">
    <asp:ListItem Value="2000">2000</asp:ListItem>
    <asp:ListItem Value="2001">2001</asp:ListItem>
    <asp:ListItem Value="2002">2002</asp:ListItem>
    <asp:ListItem Value="2003">2003</asp:ListItem>
    <asp:ListItem Value="2004">2004</asp:ListItem>
</asp:DropDownList>

Option Value
<asp:TextBox ID="txtYearValue" runat="server"></asp:TextBox>
Option Display Text
<asp:TextBox ID="txtYearDisplayValue" runat="server"></asp:TextBox>
<input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javascript:addNewListItem();" />

Comments