Skip to main content

Create a Select Tag Dynamically Using Jquery

Create a Select Tag Dynamically Using Jquery and HTML

From this blog, i want to share my any learning technology in program level. Today i want to create a select and input tag dynamically and and write the change event for all the select tag which are created dynamically.

We can create a element using a method document.createElement() in javascript. After that we can add the id, name like this properties using .attr() method in Jquery.

After setting all properties, we created our element but we need to join that element with document. For that we can use appendTo() or insertAfter() to join with already existing element in html document.  

Example coding for that:

In javascript function:

   var newelemet=$(document.createElement('p')).attr('id','elementId');
    newelement.html('This is the paragraph content');

  this code only for creating a paragraph.
After creating paragraph we need to append this to any existing element like div, etc..
 
newelement.appendTo("#dividtobeappend");

After that we can learn adding select tag also like that only..


Adding select also very simple if create a div or ol in the html document we cant add it easily.

what i am done is create a one div containing a ol. In script i am create a list dynamically and within the the content of list i am create a select tag like following .

1. Creating li element
  var newelemet=$(document.createElement('li')).attr('id','elementId');

2. Adding select tag content using html() method.

       newelement.html('<select id=selectid ><option>option1</option><option>option2</option></select>');
3. After adding the content we set into div using appendTo() method in jquery.

       newelement.appendTo("divtobeappend");

These post is used for creating select element dynamically. We can write dynamic change method for let we see in next post.


 

Labels:

Comments

Post a Comment

Popular posts from this blog

Data type precedence - SQL Server

       In SQL Server, data type precedence determines which data type takes precedence over others when two or more data types are combined or compared. It is important to understand data type precedence to ensure that the correct data type is used and that data is not lost or truncated during operations. In this blog, we will discuss data type precedence in SQL Server with examples. Data type precedence levels SQL Server has 16 data type precedence levels, with the highest level being 1 and the lowest level being 16. The data type with the lowest precedence is considered to be the "weakest" data type and is most likely to be converted to a higher precedence data type during operations. Here is the list of data types in SQL Server, ordered by their precedence levels: user-defined data types (highest precedence) sql_variant xml datetimeoffset datetime2 datetime smalldatetime date time float real decimal/numeric money/smallmoney bigint/i...
Post a Comment
Read more

Synonyms, Trigger & Sequences - SQL Server

  Synonyms In SQL Server, a synonym is an alternative name for a database object, such as a table, view, stored procedure, or function. Synonyms can be useful for simplifying complex object names, abstracting the underlying object structure, or providing a layer of indirection between objects and their callers. Creating a synonym in SQL Server is straightforward. Here's an example:               CREATE SYNONYM MyTable FOR AdventureWorks2019 . dbo . MyTable ; In this example, we're creating a synonym called MyTable that points to a table called MyTable in the AdventureWorks2019 database. Now, instead of referring to the table as AdventureWorks2019.dbo.MyTable, we can simply use the synonym name MyTable. To modify a synonym in SQL Server, you can use the ALTER SYNONYM statement. Here's an example:               ALTER SYNONYM MyTable RENA...
Post a Comment
Read more

Table Data Type- SQL Server

       In SQL Server, the table data type is a structured data type that allows you to define a table as a variable. It can be useful in scenarios where you need to store data temporarily or pass data between stored procedures or functions. In this blog, we will explore the table data type in SQL Server and provide an example of how it can be used. Introduction to the table data type The table data type is a structured data type that allows you to define a table as a variable. It can be used to store data temporarily or pass data between stored procedures or functions. The table variable behaves like a regular table in SQL Server, but it is stored in memory rather than on disk. Creating a table variable in SQL Server To create a table variable in SQL Server, you need to declare the variable and define the table structure. The following code demonstrates how to declare a table variable and define the table structure: DECLARE @MyTable TABLE (   ...
Post a Comment
Read more