We Keep Coding

Append selected <option> into <input> text in JQuery

I want to append value from the selected option to input. The option in <select> is from looping. So whenever I try to append the value somehow I always get the last record from the select option, not the one I have chosen.
Here is my code:
$('select[name="service"]').empty();
$.each(data, function(key, value) {
$.each(value.costs, function(key1, value1) {
$.each(value1.cost, function(key2, value2) {
$('select[name="service"]').append('<option value="' +
key + '">' + value1.service + ' - ' + value1.description + ' - ' +
value2.value +'</option>');
// I want to append the value2.value from selected option into this, but I always got the last record
$('input[name="cost"]').val(value2.value);
});
});
});
I want to append the value from the selected option to this, but I always got the last record from the loop.

Add remove option back in selectlist

I am new in JavaScript and jQuery. I have a dropdown list retrieved from database. When I select any one, it add to as text, and remove from dropdown list. And placed a button to each text, if I want to remove any one. When click remove button, it append again in select list.
My problem is that when I removed any text option, it append back to the dropdown select list as blank option.
I want to append removed option back to the select list as text. I don't know where I did wrong thing.
$(document).ready(function() {
$('#location').click(function() {
if($(this).find( "option:selected").val() != 0) {
$('#Locality').append("<div><input type='text' class='field' value='" + $(this).find( "option:selected").text() + "' disabled/><input type=\"button\" class='removeBtn' value=\"Remove\" id=\"removeBtn\" /></div>");
$(this).find("option:selected").remove();
}
$('.removeBtn').on('click', function () {
$(this).parent().remove();
$("#location").append('<option>' + $(this).parent().text() + '</option>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Locality">
<select name="supplyLocation" id="location" >
<option value="0">Select Locality</option>
</select>
</div>

this worked for me but when you put it back in the select menu it will be the last option, here's a JsFiddle https://jsfiddle.net/9tLc1pa4/1/
JS
$(document).ready(function() {
$('#location').change(function() {
if($(this).find( "option:selected").val() != 0) {
$('#Locality').append("<div><input type='text' class='field' value='" + $(this).find( "option:selected").text() + "' disabled/><input type=\"button\" class='removeBtn' value=\"Remove\" id=\"removeBtn\" /></div>");
$(this).find("option:selected").remove();
}
$('.removeBtn').on('click', function () {
$(this).parent().remove();
var text = '<option>' + $(this).parent().find('input').val() + '</option>';
$("#location").append(text);
});
});
});

JQuery creating unwanted option tag in select menu

I am having an issue involving a multiple select menu. The user has the ability to select multiple items from Selectbox A and add them to Selectbox B. I Use jQuery to add the items to an array each time the add button is clicked and populate Selectbox B using a foreach loop in php and for the most part it is working fine.
However the issue is that when the user adds the first item to Selectbox A it adds the item but also an empty option tag which I do not want. Is there anything I can do to resolve this?
This is my HTML code:
<select multiple="multiple" id="active" name="activecontributors[]">
<option value="0"> </option>
</select>
This is my JQuery code:
var drop2html = $("#active").html();
//ADD/REMOVE functionality for the contributors select boxes.
$('#addBtn').click(function (e) {//Adding
e.preventDefault();
$('#compresult option:selected').each(function(){
drop2html += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
})
$("#active").html(drop2html);
});
$('#removeBtn').click(function (e){//Removing
e.preventDefault();
$('#active option:selected').each(function(){
$('#active option:selected').remove();
})
drop2html = $('#active').html();
});
//on submit select all the options in active contributors...
$('#mainform').submit(function(){
$("#active option").attr("selected", "selected");
});
For some reason when the page loads it always shows the option tag. I would like for my select box to show no option tag if possible.

its because of the empty option already present in that menu.
$('#compresult option:selected').each(function(){
drop2html = '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
})
try this for without appending to the string or
var drop2html = '';
store empty value to it.

You can use below code without drop2html variable and get rid of your problem :
$(function(){
//remove empty option from active
$('#active option').remove();
$('#addBtn').click(function (e) {//Adding
e.preventDefault();
$('#compresult option:selected').each(function(){
$('#active').append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>');
})
});
$('#removeBtn').click(function (e){//Removing
e.preventDefault();
$('#active option:selected').each(function(){
$('#active option:selected').remove();
})
});
});

Adding option to multiple select and setting as selected

I'm running into a weird problem. I have a text box and accompanying button. The user will type in a name and click the button to add it to multiple select below it.
I want to add the name to the select as selected so that every name in the select is always selected. I'm using select2 so that the selected options appear as little boxes and can be clicked on to remove (see the 2nd select on this page: http://fk.github.io/select2-bootstrap-css/)
I have it working for the first name you type in, but I can't get it to select any subsequent names in addition to the first.
$('#Visitors').append("<option value='" + visitorLogin.toUpperCase() + "'>" + visitorLogin.toUpperCase() + "</option>");
$('#Visitors option').prop('selected', 'selected');
var allusers = $('#Visitors option').val();
console.log(allusers);
$('#Visitors').val(allusers).trigger("change");

I just had to capture all of the options like this:
$('#Visitors').append("<option value='" + visitorLogin.toUpperCase() + "'>" + visitorLogin.toUpperCase() + "</option>");
var allOptions = $("#Visitors").children().map(function () { return $(this).val(); }).get();
$('#Visitors').val(allOptions).trigger("change");

Dynamically adding element to Select and setting the selectindex in JQuery

I've created a dynamic select list box as below
for (var i in c) {
//alert(c[i].IsDefault);
if(c[i].IsDefault==true){
//alert('found default');
$("#AnsType").append("<option value='" + c[i].ID + "'>" + c[i].Code+ "</option>");
temp = c[i].Code;
}
else{
$("#AnsType").append("<option value='" + c[i].ID + "'>" + c[i].Code+ "</option>");
}
}
refreshed it
$('#AnsType').selectmenu('refresh');
I tried all these methods and tried to select teh 2nd element in teh listnone worked for me.
$('#AnsType').val(temp.toString());
$('#AnsType').get(3).selectedIndex = 3;
$('select#AnsType').val('3');
$("#AnsType option[text='3']").attr("selected","selected") ;
$("#mydropdownlist").attr('selectedIndex', 1);
$('#AnsType').val(3);
$("#AnsType").attr('selectedIndex', 2);
$("#AnsType").val(c[parseInt(temp)].Code);
$("select#AnsType option[selected]").removeAttr("selected");
$("select#AnsType option[value='"+temp+"']").attr("selected", "selected");
this is how when my listbox is created
<select id="AnsType" name="AnsType">
<option value="1">Obokad</option>
<option value="3">Egen bokning</option>
</select>
Any help is appreciated and thanks in advance for your help..

If you want some element to be pre-selected when creating the menu, add the selected attribute to the corresponding option element:
if(c[i].IsDefault==true){
$("#AnsType")
.append("<option value='" + c[i].ID + " selected='selected'">" + c[i].Code+ "</option>");
temp = c[i].Code;
}
Note that you have to refresh again the selectmenu after you programmatically change the value of the underlying select element:
$('#AnsType').val('3');
$('#AnsType').selectmenu('refresh');
Documentation
refresh update the custom select
This is used to update the custom select to reflect the native select element's value. If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen