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");
Related
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.
I am creating a bilingual form in which I have a select tag with multiple option tags inside. I wanna get that option with class "blah" and with value "1" and then select it as "selected" option.
I selected it based on class and then select based value but the result is null. Here is my code:
$('select').each(function (e, item) {
var selectedEnglish = $(item).children("option[class='English']")
var englishItem = selectedEnglish.find("option:selected").val();
var farsiList = $(item).children("option[class='Farsi']")
var farsiItem = farsiList.find("[value='" + englishItem + "']");
farsiItem.attr('selected', 'selected');
});
Whats more how can I get with one chain of statements?
this selected is populated in jquery:
$("#TitleId").html("");
$("#TitleId")
.html("<option value='' class='Farsi'>عنوان</option><option value='' class='English'>Title</option>");
$.each(titles,
function (key, value) {
$("#TitleId")
.html($("#TitleId").html() +
"<option class='Farsi' value='" +
value.Id +
"'>" +
value.Name +
"</option>"+
"<option class='English' value='" +
value.Id +
"'>" +
value.EnName +
"</option>");
});
If you want to get the option with class "blah" and value "1", this is your query:
$('select option[class=blah][value="1"]')
If you want to select that option you can simply do:
$('select option[class=blah][value="1"]').attr('selected', 'selected');
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();
})
});
});
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
I got this example from a blog, but every time I do this:
$(':input[name=' + inputName + ']').each(function(i, selected)
{
alert($(selected).text());
});
I got all an alert with all the options together :(
I have to search by the input name always, the inputs have no id.
Which is the right way to do it?
Kind regards.
That's because select tag is found by jquery, not option tags
This will give you list of the options.
$(':input[name=' + inputName + '] option').each(function(i, selected) {
alert($(selected).text());
});
An example
Assuming your HTML is similar to this
<SELECT NAME="mylist">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</SELECT>
you need to modify your selector to iterate over the <OPTION> tags, your selector was iterating over the <SELECT> tag
var inputName = mylist;
$(':input[name=' + inputName + '] option').each(function(i, selected) {
alert($(selected).text());
});
Without seeing your html, try this:
$(":input[name='" + inputName + "'] option").each(function(i, selected) {
alert($(selected).text());
});