Develop Reference

JQuery function works alone, but not when called with AJAX

I have the following jquery script that is working just fine when standing alone, but does not work whenever I use AJAX to populate the page. Here is the jquery script:
// This section handles adding new links to page //
function appendSection() {
$(this).off('change');
const newSection = $(this).closest('section').clone();
newSection.find('input, select').each((i, el) => {
el.value = '';
el.name = el.name.replace(/\[(\d)\]/, (match, p1) => `[${parseInt(p1) + 1}]`);
});
newSection.on('change', appendSection);
$('.attachments').append(newSection);
}
$(".attachments section input[type='url']").change(appendSection);
What's odd is this script works just fine if it is on a standalone page, as in the example snippet below. But whenever I call this example snipet using AJAX, suddenly my jQuery script no longer functions. Why would this happen?
// This section handles adding new links to page //
function appendSection() {
$(this).off('change');
const newSection = $(this).closest('section').clone();
newSection.find('input, select').each((i, el) => {
el.value = '';
el.name = el.name.replace(/\[(\d)\]/, (match, p1) => `[${parseInt(p1) + 1}]`);
});
newSection.on('change', appendSection);
$('.attachments').append(newSection);
}
$(".attachments section input[type='url']").change(appendSection);
// This section handles navigation //
function nav(arg) {
var destination = arg.dataset.nav;
var pages = document.querySelectorAll("[data-page]");
var nav = document.querySelectorAll("[data-nav]");
for (i = 0; i < nav.length; i++) { // Remove the class 'active' if it exists
nav[i].classList.remove('active')
}
arg.classList.add('active');
for (i = 0; i < pages.length; i++) { // Hide/show the correct pages
if (pages[i].dataset.page != destination) {
pages[i].style.display = "none";
} else {
if (destination == 'basic') {pages[i].style.display = "flex";}
if (destination != 'basic') {pages[i].style.display = "block";}
}
}
}
.modal {
display: none;
position: fixed;
z-index: 20;
right: 0; top: 0;
width: 100%; height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s}
.assignment-window{
display: grid;
position: fixed;
overflow: hidden;
padding: 10px;
padding-bottom: 16px;
box-sizing: border-box;
width: 100vw; height: 70vh;
bottom: 0; left: 0;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: white;
grid-template-rows: auto 1fr;
grid-template-columns: 0.9fr 2.5fr;
grid-template-areas:
"asstop asstop"
"assnav asscontent"}
/* ----------[ASS TOP]---------- */
.asstop {
grid-area: asstop;
padding: 24px 20px;
box-sizing: border-box;
border-bottom: 2px solid #581F98;}
.asstop .title {
display: flex;
align-items: center;}
.asstop .title input {
flex: 1 1;
font-size: 24px;
border-radius: 8px;
margin-right: 20px;
border: 1px solid lightgray}
.asstop select {
outline: none;
-webkit-appearance: none;
padding: 12px 16px;
font-size: 24px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid lightgray}
.asstop button {
margin-top: -5px;}
/* ----------[ASS NAV]---------- */
.assnav {
grid-area: assnav;
padding-top: 20px;
padding-right: 10%;
border-right: 1px solid lightgray}
.assnav ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none}
.assnav li {
display: block;
text-decoration: none;
color: #484848;
font-size: 20px;
padding: 14px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;}
.assnav li:hover {background-color: #F2F2F2}
.assnav li.active {background-color: #EEEEEE}
/* ----------[ASS CONTENT]---------- */
.asscontent {
grid-area: asscontent;
display: flex;
flex-direction: column;
padding: 30px;
box-sizing: border-box;
overflow: scroll}
.asscontent input, .asscontent select {
flex: 1;
outline: none;
-webkit-appearance: none;
padding: 8px 16px;
font-size: 18px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid lightgray}
/* ==== Basic Styling ==== */
.asscontent .basic {
display: flex;
height: 100%;
flex-direction: column}
.asscontent .basic textarea {
flex: 1;
font-size: 18px;
border-radius: 8px;
box-sizing: border-box;}
.asscontent .basic .config {
display: flex;
justify-content: space-between;
padding-top: 20px;}
.asscontent .basic input {text-align: center;}
.asscontent .basic .points {width: 80px;}
/* ==== Attachment Styling ==== */
.asscontent .attachments {display: none}
.asscontent .attachments section {
display: flex;
justify-content: space-between;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid lightgray}
/* ==== Delete Styling ==== */
.asscontent .advanced {display: none}
/* ==== Delete Styling ==== */
.asscontent .delete {display: none;}
.asscontent .delete ul {margin-bottom: 30px;}
.asscontent .delete li {margin-bottom: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class='assignment-window'>
<div class='asstop'>
<div class='title'>
<select name='assEmoji'>
<option >✏️</option>
<option >💻</option>
<option >📚</option>
<option >💯</option>
<option >🧪</option>
</select>
<input name='title' type='text' placeholder='Type assignment title..' value='' required>
<button name='createAss' class='button purple-btn'>Assign Task</button>
</div>
</div>
<div class='assnav'>
<ul>
<li data-nav='basic' onclick='nav(this);' class='active'>Basic Setup</li>
<li data-nav='attachments' onclick='nav(this);'>Attachments</li>
<li data-nav='advanced' onclick='nav(this);'>Advanced Settings</li>
</ul>
</div>
<div class='asscontent'>
<div class='basic' data-page='basic'>
<textarea name='directions' placeholder='Type assignment directions..'></textarea>
<div class='config'>
<section>
<span>Subject: </span>
<select name='subID'>
<option value='1' >Reading</option>
<option value='2' >Social Studies</option>
<option value='3' >Math</option>
<option value='4' >Science</option>
<option value='5' >Writing</option>
</select>
</section>
<section>
<span>Points:</span>
<input name='points' class='points' type='text' value='100'>
</section>
<section>
<span>Due Date:</span>
<input name='due' type='datetime-local' value='2021-09-10T15:00'>
</section>
</div>
</div>
<div class='attachments' data-page='attachments'>
<section>
<div class='displayName'>
<select name='link[0][linkEmoji]'>
<option >📎</option>
<option >🎬</option>
<option >📖</option>
</select>
<input name='link[0][linkTitle]' placeholder='Title of website..' type='text' value=''>
</div>
<div class='url'>
<input name='link[0][linkURL]' placeholder='Insert website URL..' type='url' value=''>
</div>
<div class='visible'>
<span>Visible: <span>
<select name='link[0][linkClass]'>
<option value=''>- All Students -</option><option value='1' >🟣 Reading/Social</option><option value='2' >🔴 Reading/Social</option><option value='3' >🔵 Reading/Social</option><option value='4' >🟢 Reading/Social</option>
</select>
</div>
</section>
</div>
<div class='advanced' data-page='advanced'>
<section>
<span>Visible to students: </span><input name='assigned' type='date' value='2021-09-07'>
</section>
<section>
<span>Submission: </span>
<select name='submitType'>
<option value='scan' >Require students to scan.</option>
<option value='button' >Allow scanning or turn in button.</option>
<option value='button' >Do not allow submissions.</option>
</select>
</section>
<section>
<span>Assignment Type: </span>
<select name='assType'>
<option >Assignment</option>
<option >Assessment</option>
<option >Daily Work</option>
<option >Quiz</option>
<option >Participation</option>
<option >Project</option>
</select>
</section>
</div>
<div class='delete' data-page='delete'>
<p>Deleting the assignment? The following will happen: </p>
<ul>
<li>All recorded scores will be deleted.</li>
<li>Student averages will adjust from the deleted scores.</li>
<li>The assignment will be removed from student view.</li>
<li>This action cannot be undone.</li>
</ul>
<button type='button' class='button grey-btn'>Cancel</button>
<button name='deleteAss' class='button red-btn'>Permanently Delete</button>
</div>
</div>
</div>
For reference, this is what the source code looks like that I am using to call on this page with AJAX:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<a onclick="assignInfo('new')">Launch</a>
<div id="assignModal" class="modal">
<form id="assignInfo" action='assign.int.php' method='POST'></form>
<input form='assignInfo' type='hidden' name='source' value='plan'>
</div>
<script> /* ---- Script to populate Assign modal ---- */
var assignModal = document.getElementById("assignModal");
function assignInfo(str){
assignModal.style.display = "block";
if (str == 'new') {var url = "assignModal.tem.php";}
else {var url = "assignModal.tem.php?assID=" + str;}
fetch(url).then((response) =>response.text()).then((text) => {
var parser = new DOMParser();
var doc = parser.parseFromString(text, "text/html");
var ele = doc.documentElement;
var scripts = ele.getElementsByTagName('script');
for(var script of scripts){
var head = document.getElementsByTagName('head')[0];
var scriptElement = document.createElement('script');
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.innerText = script.innerText;
head.appendChild(scriptElement);
head.removeChild(scriptElement);
}
document.getElementById("assignInfo").innerHTML=text;
});
}
window.onclick = function(event) { /* Make modal disappear when you click "X" */
if (event.target == assignModal) {
if (confirm("Are you sure? This assignment will not be saved if you exit.")) {
assignModal.style.display = "none";
} else {
assignModal.style.display = "block";
}
}
}
</script>
<script>
// This section handles adding new links to page //
function appendSection() {
$(this).off('change');
const newSection = $(this).closest('section').clone();
newSection.find('input, select').each((i, el) => {
el.value = '';
el.name = el.name.replace(/\[(\d)\]/, (match, p1) => `[${parseInt(p1) + 1}]`);
});
newSection.on('change', appendSection);
$('.attachments').append(newSection);
}
$(".attachments section input[type='url']").change(appendSection);
// This section handles navigation //
function nav(arg) {
var destination = arg.dataset.nav;
var pages = document.querySelectorAll("[data-page]");
var nav = document.querySelectorAll("[data-nav]");
for (i = 0; i < nav.length; i++) { // Remove the class 'active' if it exists
nav[i].classList.remove('active')
}
arg.classList.add('active');
for (i = 0; i < pages.length; i++) { // Hide/show the correct pages
if (pages[i].dataset.page != destination) {
pages[i].style.display = "none";
} else {
if (destination == 'basic') {pages[i].style.display = "flex";}
if (destination != 'basic') {pages[i].style.display = "block";}
}
}
}
</script>
I'm not entirely sure why this would not work whenever I use ajax

get text inside element, if element contains select get selected option

Post Edited: Using MutationObserver instead of DOMSubtreeModified
I have a div where I am using .each to go through every label and get their text, but I'd like to add an additional ifelse statement where if the label includes a select child, add the selected option to the text string
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
var target = document.querySelector('#droppable')
var observer = new MutationObserver(function(mutations) {
var str = "";
$('#droppable label').each(function(){
str += $(this).text() + "<br>";
document.getElementById("inside_drop_zone").innerHTML = str
});
})
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label><select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label><select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
Desired Output
label OR label : selected option
ONE + ":" + week 1
THREE
TWO + ":" + week 3
I'm pretty new to JQuery so thank you for any help/tips!

Look for lines marked // changed
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
$("body").on('DOMSubtreeModified', "#droppable", function() {
var str = "";
$('#droppable label').each(function() {
const txt = $(this).text() // changed
const val = $(this).parent().find("select").children("option:selected").val() // changed - the main idea is to get parent() of $(this) and then search for <select>
str += txt + (val ? ":" + val : "") + "<br>"; // changed
})
document.getElementById("inside_drop_zone").innerHTML = str
});
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label>
<select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label>
<select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>

How to make my own select

I wish to make my own select.
Actually my select looks like this :
JS Fiddle
and is it coded like this :
<p>Title</p>
<form>
<input type="color" onchange="colorisPanneau(value);pageSuivante();" name="coloris_panneau" list="liste_color3" id="coloris_panneau" value="#C5B9A9" class="formc" style="height:24px;width:202px;">
<datalist id="liste_color3">
<option value="#FFFFFF">
<option value="#999999">
<option value="#000000">
<option value="#582810">
</datalist>
</form>
And i want to make it look like that :
How can i do this ?
What do i need to do to be able to personalize the interface in my combobox ?
Where can i find documentation to be able to do so ?
Thank you very much :)

The datalist cannot be modified with css, even if you could with some css-magic, you could never get multiple items inside of the datalist options. The only solution is to create a select box from scratch.
I was bored so I made you something you can start with:
$('html').on("click", function(e) {
$('.color-picker').removeClass('open');
});
$(document).on("click", ".color-value", function(e) {
e.stopPropagation();
if ($('.color-picker').hasClass('open')) {
$('.color-picker').removeClass('open');
} else {
$('.color-picker').addClass('open');
}
});
$(document).on("click", ".list-item", function() {
var color = $(this).data('color');
$('#color-input').val(color);
$('.color-value').html($(this).html());
//This is now the value of your hidden input field
$('#value').html(color);
});
* {
box-sizing: border-box;
}
.color-picker {
height: 30px;
width: 150px;
overflow: hidden;
color: #666;
background: #FFF;
}
.open {
overflow: visible;
;
}
.list {
border: 1px solid #CCC;
border-top: none;
background: #FFF;
}
.list-item {
padding: 5px;
cursor: pointer;
}
.list-item:hover {
background: #f1f1f1;
}
.list-item>span {
display: inline-block;
vertical-align: middle;
height: 20px;
line-height: 20px;
}
.list-item>span:first-child {
width: 20px;
margin-right: 5px;
}
.color-value {
height: 30px;
line-height: 30px;
padding: 0 5px;
width: 100%;
cursor: pointer;
border: 1px solid #CCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color-picker">
<input id="color-input" type="hidden" name="coloris_panneau" value="" />
<div class="color-value list-item">Select your color</div>
<div class="list">
<div class="list-item" data-color="#edae0e">
<span style="background:#edae0e;"></span>
<span>Yellow</span>
</div>
<div class="list-item" data-color="#ff0000">
<span style="background:#ff0000;"></span>
<span>Red</span>
</div>
<div class="list-item" data-color="#336699">
<span style="background:#336699;"></span>
<span>Blue</span>
</div>
</div>
</div>

Making two buttons as on/off and control if dropdownlists should be active or not

I'm trying to create a on/off button with two buttons. Both are set inline.
When button1 "Return" is active/On a lightblue color will show. If you click on the other button, this one goes into the lightblue mode and the other stays white.
Have tried to create a jsfiddle so you can see what i got.
JSfiddle
Code
<div class="bookingbox">
<form>
<div class="col-sm-12">
<div class="form-group">
<button type="button" class="return-btn">RETURN</button>
<button type="button" class="oneway-btn">ONE WAY</button>
</div>
<div class="form-group">
<label for="OutwardLabel">label1</label>
<select id="Dropdown">
<option>Country</option>
<option>Country</option>
<option>Country</option>
</select>
</div>
<div class="form-group">
<label for="ReturnLabel">label2</label>
<select id="Dropdown">
<option>Country</option>
<option>Country</option>
<option>Country</option>
</select>
</div>
</div>
</form>
</div>
My problem is that i can't seem to make them active where the color stays... it only shows when i click with the mouse. If i release the mouse again, it's back to white.
The point is when you activate the "one way" button, the last dropdownbox should be disabled.. I'm thinking that javascript can do it.
Thx

Pure Javascript.
Once you click One Way button, it disables the second select.
Works by changing the classes of the buttons, based on your CSS.
Edit: JSFiddle
document.getElementById("return").addEventListener("click", toggleClick, false);
document.getElementById("oneway").addEventListener("click", toggleClick, false);
function toggleClick() {
if (this.id == "return") {
this.className = "clicked-return";
document.getElementById("oneway").className = "unclicked-oneway";
document.getElementById('dropdown-last').disabled = false;
} else {
this.className = "clicked-oneway";
document.getElementById("return").className = "unclicked-return";
document.getElementById('dropdown-last').disabled = true;
}
}
.bookingbox {
width: 100%;
height: 300px;
background-color: green;
padding-top: 20px;
}
.unclicked-return {
width: 49%;
height: 50px;
float: left;
background-color: white;
border-style: none;
color: black;
}
.unclicked-oneway {
width: 49%;
height: 50px;
float: right;
background-color: white;
border-style: none;
color: black;
}
.clicked-return {
width: 49%;
height: 50px;
float: left;
background-color: #85BCE9;
border-style: none;
color: white;
}
.clicked-oneway {
width: 49%;
height: 50px;
float: right;
background-color: #85BCE9;
border-style: none;
color: white;
}
.dropdown {
height: 30px;
width: 100%;
}
<div class="bookingbox">
<form>
<div class="col-sm-12">
<div class="form-group">
<button type="button" id="return" class="unclicked-return">RETURN</button>
<button type="button" id="oneway" class="unclicked-oneway">ONE WAY</button>
</div>
<div class="form-group">
<label for="OutwardLabel">label1</label>
<select class="dropdown" id="dropdown-first">
<option>Country</option>
<option>Country</option>
<option>Country</option>
</select>
</div>
<div class="form-group">
<label for="ReturnLabel">label2</label>
<select class="dropdown" id="dropdown-last">
<option>Country</option>
<option>Country</option>
<option>Country</option>
</select>
</div>
</div>
</form>
</div>

https://jsfiddle.net/gn6k1zm7/7/
$('.return-btn, .oneway-btn').on('click', function (){
$('.active-btn').removeClass( 'active-btn' ).val( '' );
$(this).addClass( 'active-btn' ).val( 'selected' );
});
Is this what you mean? Please note two things:
I've included JQuery to achieve this
Once you click on a button now, it will set the value attribute to "selected", just in-case you would like to do anything with the buttons on later hand.

Create two new css classes that will set the color of the button so that it stays that color after clicking. Add two event handlers for the button clicks, adding the 'hide the dropdown' to the one way button.
html:
<button type="button" id="return-btn" class="nonactive">RETURN</button>
<button type="button" id="oneway-btn" class="nonactive">ONE WAY</button>
css:
.active {
background-color: #85BCE9;
}
.nonactive {
background-color: white;
}
.hidden {
display: none;
}
javascript:
var btnReturn = document.querySelector('#return-btn'),
btnOneWay = document.querySelector('#oneway-btn'),
dropdown = document.querySelector('#Dropdown').parentNode;
btnReturn.addEventListener('click', function() {
btnReturn.className = 'active';
btnOneWay.className = 'nonactive';
});
btnOneWay.addEventListener('click', function() {
btnOneWay.className = 'active';
btnReturn.className = 'nonactive';
dropdown.className = 'form-group hidden';
});

This a JS only solution, you just need to attach this function to the onclick event of the two buttons:
var returnBtn = document.getElementsByClassName("return-btn")[0];
var oneway = document.getElementsByClassName("oneway-btn")[0];
switchButtons = function switchButtons(clicked) {
clicked.className = clicked.className + " active-btn";
if (clicked === returnBtn) {
oneway.className = oneway.className.replace("active-btn", "");
} else if (clicked === oneway) {
returnBtn.className = returnBtn.className.replace("active-btn", "");
}
}
And in the CSS I replaced the following:
.return-btn:active {
background-color:#85BCE9;
color: white;
}
.oneway-btn:active {
background-color:#85BCE9;
color: white;
}
With the following class:
.active-btn {
background-color:#85BCE9;
color: white;
}
And on each button click add this class to the clicked button and remove it from the other one.
var returnBtn = document.getElementsByClassName("return-btn")[0];
var oneway = document.getElementsByClassName("oneway-btn")[0];
switchButtons = function switchButtons(clicked) {
clicked.className = clicked.className + " active-btn";
if (clicked === returnBtn) {
oneway.className = oneway.className.replace("active-btn", "");
} else if (clicked === oneway) {
returnBtn.className = returnBtn.className.replace("active-btn", "");
}
}
.bookingbox {
width: 100%;
height: 300px;
background-color: green;
padding-top: 20px;
}
.return-btn {
width: 49%;
height: 50px;
float: left;
background-color: white;
border-style: none;
}
.oneway-btn {
width: 49%;
height: 50px;
float: right;
background-color: white;
border-style: none;
}
.active-btn {
background-color:#85BCE9;
color: white;
}
#Dropdown {
height: 30px;
width: 100%;
}
<div class="bookingbox">
<form>
<div class="col-sm-12">
<div class="form-group">
<button onclick="switchButtons(this)" type="button" class="return-btn">RETURN</button>
<button onclick="switchButtons(this)" type="button" class="oneway-btn">ONE WAY</button>
</div>
<div class="form-group">
<label for="OutwardLabel">label1</label>
<select id="Dropdown">
<option>Country</option>
<option>Country</option>
<option>Country</option>
</select>
</div>
<div class="form-group">
<label for="ReturnLabel">label2</label>
<select id="Dropdown">
<option>Country</option>
<option>Country</option>
<option>Country</option>
</select>
</div>
</div>
</form>
</div>
And this is the updated Fiddle.

add a delete icon in front of each row in list in jquery

I have a list control and at run time when I bind data to the control I want to append a delete icon or a button to each row in jquery, so that I can delete a row if I want to. Here is the code that I am using to bind data to the control.
$(response.aaData).each(function (index, val) {
$("#multiselectSubCat")
.append($('<option></option>').val(val.SubCategoryId).html(val.SubCategoryName));
});
Rendered
<select name="from" id="multiselectSubCat" multiple="multiple" style="width: 300px; top: 100px">
<option value="9">Category1</option>
<option value="10">Category2</option>
<option value="11">Category3</option>
<option value="12">Category4</option>
<option value="13">Category5</option>
<option value="22">Category6</option>
</select>

I want to know whether you want input button or image to show user that you can delete particular record?
I have made an example where I am adding background.
.select-box {
height: 400px;
}
.select-box option {
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat;
padding-left: 25px;
cursor: pointer;
}
.select-box option:hover {
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat #eee;
}
<select name="from" id="multiselectSubCat" multiple="multiple" class="select-box" style="width: 300px; top: 100px">
<option value="9">Category1</option>
<option value="10">Category2</option>
<option value="11">Category3</option>
<option value="12">Category4</option>
<option value="13">Category5</option>
<option value="22">Category6</option>
</select>

Building on this
How can I use <ul> list instead of <select> dropdown for the languages switcher?
have a go at this:
var nav = $('#nav');
var selection = $('.select');
var select = selection.find('li');
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideUp(200);
} else {
nav.addClass('active');
selection.stop().slideDown(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
select.removeClass('active');
$(this).addClass('active');
alert ("location.href = 'index.php?lang=" + $(this).attr('data-value'));
});
$(".del").on("click",function(e) {
e.preventDefault();
$(this).parent().remove();
});
h2 {
width: 200px;
background: #222;
color: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol
{
list-style-type: none;
}
ol.select {
display: none;
}
ol.select > li {
width: 200px;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol.select > li:hover {
background: #aaa;
}
.select a { text-decoration:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2 id="nav">Choose Language</h2>
<ol class="select">
<li data-value="en"><a class="del" href="#">X</a> English</li>
<li data-value="de"><a class="del" href="#">X</a> Deutsch</li>
</ol>

U did the right thing just little changes required
<a href="http://jsfiddle.net/ajaymalhotra15/2tmntdft/" > click here to see code </a>