Remove option element and add it as a list item JQuery

By Posted on

This is an article which is combining a scenario of removing an option element and then add it into another element in the same page as a list item. The whole scenario is achieved using JQuery defined in the page which is being executed. Removing option element can be seen in several articles. One of it is in the article titled ‘Remove option element JQuery by selecting the option element’ which is specifically remove option element by sensing the select event of its own option element exist in the select HTML element. The article itself exist in this link.  Another article which is also written to discuss on how to remove option element by detecting the event click of the button can also be considered as further reference. The article titled ‘Remove option element JQuery by clicking the button‘ and it can be visited in this following link.

So, after removing the option element, the next step based on the scenario which is designed, the content and also the attribute of the option element must be converted into another HTML element which in this context of article it is the list item.

First of all, the option element’s context and attribute must be retrieved. Below is how to carry the task which is implemented in line of script or snippet code :

List item element need a value represented to be defined in it. To get the value which is retrieved from the option element, below is the line of JQuery script :

var element_value = $("#list_selection option").filter(":selected").val();

The above snippet code is a line which is actually used to retrieve the value of an option element. It is getting the value of the element which is defined in the previous keyword or script. The keyword or script is “.filter(“:selected”) which is actually referred to the option element selected. That option element itself located inside an HTML element where the element itself has an id of list_selection. Another way to get the value of an option element is shown below :

var element_value = $("#list_selection option").filter(":selected").attr("value");

The above snippet code also has the sole purpose of getting the value of an attribute from the selected option element contained in an HTML element which has the id of ‘list_selection’.

Another component needed for the list item is the text, label or string used for representing the list item element’s label. So, below is the line of JQuery script defined to take the string label :

var element_text = $("#list_selection option").filter(":selected").text();

The above snippet code is a line which is actually used to retrieve the text of an option element which is needed further to be filled in the list item.

Those two lines of code above are the component which is for creating the list item element. In this context, the option element has already been generated by using the same technique written in the article titled ‘Add select option JQuery from Array Variable’ which is available in this following link.

So, using the above variable named element_value and element_text it is used as a component for completing list item element.

$('#list_selected')
.append($("<li>"+element_value+"</li>")
.attr("value",element_value).text(element_text));

The above line of JQuery script is appending or adding a list item to a HTML element which has the id of list_selected which is actually an unordered list. To be able to actually add the item list, certainly it need an unordered list to be written as part of HTML web-page. Below is the HTML script which is important for removing the option element and adding the text, value of it into a list item :

 <select id="list_selection">
 </select>
 <input type="submit" id="add_selection_btn" value="Submit"></input>
 <ul id="list_selected">
 </ul>

The above HTML script is intended as the container of option element in the select element with an id of ‘list_selection’. Erasing option element and then adding a list item into an unordered list element. For the full JQuery script removing the option element and adding a list item is shown as follows :

$('#add_selection_btn').click(function(e){
     var element_value = 
     $("#list_selection option").filter(":selected").val();
     var element_text = 
     $("#list_selection option").filter(":selected").text();
     $('#list_selected')
     .append($("<li>"+element_value+"</li>")
     .attr("value",element_value).text(element_text)); 
     $('#list_selection option:selected").remove();
});

The above JQuery script can be explained as follows :

1. By detecting a click event on a button with the id of ‘add_selection_btn’, get the value and the label of the option element selected which is located inside the select element with the id of ‘list_selection’.It is shown with in the following line of snippet code :

$('#add_selection_btn').click(function(e){ 
var element_value = $("#list_selection option").filter(":selected").val(); 
var element_text = $("#list_selection option").filter(":selected").text();

2. After getting the value and the label of the option element selected, use those informations to create a new list item element and added it to the unordered list with the id of ‘list_selection’. It is depicted in the following lines of code :

$("#list_selection option").filter(":selected").text(); $('#list_selected') .append($("<li>"+element_value+"</li>") .attr("value",element_value).text(element_text));

3. After successfully added it, remove the selected option which is located in the select element with the id of ‘list_selection’ which is described in the following line of snippet code :

$('#list_selection option:selected").remove();

Leave a Reply