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.
Related
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');
Based on a value of one listbox (selecttreatment), another listbox (indicators) options are being populated. The javascript code i use:
function sendData() { // onchange
$("#indicators").empty();
console.log($("#selecttreatment").val());
$.getJSON("functions/getcharts.php", {funcid:"giveme_chosen_treatment", chosen_treatment: $("#selecttreatment").val()}, updateData);
}
function updateData(data) {
console.log(data);
var option = '';
for (var i=0;i<data.length;i++){
//option += '<option value="'+ data[i].zi_indicator_name_id + '">' + data[i].zi_indicator_name_label + '</option>';
option += '<option value="'+ data[i].indicator_name + '">' + data[i].indicator_name + '</option>';
}
$('#indicators').append(option);
}
At first I believed it only went wrong when mysql gives back one row, but that isn't the problem. I can't fugure out whats going wrong.
So my problem is that sometimes the 2nd listbox is being populated with values, but most of the times it isn't.
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'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");
I'm fairly new to both jQuery and JavaScript so can anyone please point out what I'm missing here?
I have a form with multiple pairs of select fields, where the content of the second field relies on the selection of the first one.
Once a value is chosen from the first one then a piece of jQuery code empties the corresponding second select options, gets new values as JSON and inserts them as new select values. All of this works with the code I've written.
However if a user has chosen a second value, I'd like to restore it if possible (meaning if the new values also include the one previously selected).
I tried to do this by first saving the second value and then trying to set it once the new options have been inserted. This did not work. However when trying to debug I inserted an alert() just before restoring the second value and with that in there it does work...
Am I missing something very basic here? Any help would be appreciated.
HTML:
<select name="party-0-first" id="id_party-0-first">
<option value="" selected="selected">---------</option>
<option value="1">first_value1</option>
<option value="2">first_value2</option>
<option value="3">first_value3</option>
<option value="4">first_value4</option>
</select>
<select name="party-0-second" id="id_party-0-second">
<option value="" selected="selected">---------</option>
<option value="1">second_value1</option>
<option value="2">second_value2</option>
<option value="3">second_value3</option>
<option value="4">second_value4</option>
</select>
<select name="party-1-first" id="id_party-1-first">
...
JavaScript:
$.fn.setSecond = function() {
var divName = $(this).attr("name");
divName = divName.replace('-first', '');
divName = divName.replace('party-', '');
// Save the currently selected value of the "second" select box
// This seems to work properly
setValue = $('#id_party-' + divName + '-second').val();
// Get the new values
$.getJSON("/json_opsys/", { client: $(this).val() },
function(data){
$('#id_party-' + divName + '-second').empty();
$('#id_party-' + divName + '-second').append('<option value="" selected="selected">---------</option>');
$.each(data, function(i, item){
$('#id_party-' + divName + '-second').append('<option value="' + item.pk + '">' + item.fields.name + '</option>');
});
});
// Here I try to restore the selected value
// This does not work normally, however if I place a javascript alert() before
// this for some reason it does work
$('#id_party-' + divName + '-second').val(setValue);
$(document).ready(function(){
$('[id*=first]').change(function() {
$(this).setSecond();
});
});
Well, it looks like your getJSON() call is involved in that issue.
Remember, from the start, all ajax request are ASYNC, means your last line of code
there is most likely executed before the getJSON() success eventhandler is called.
When you set the variable "setValue", try declaring it with var:
var setValue = $('#id_party-' + divName + '-second').val();
But I don't think that's the problem. The problem is that you're trying to reset the value in some code that's going to run before the getJSON is actually done. Try moving the thing that sets the value inside the function that's passed to getJSON.
$.getJSON("/json_opsys/", { client: $(this).val() },
function(data){
$('#id_party-' + divName + '-second').empty();
$('#id_party-' + divName + '-second').append('<option value="" selected="selected">---------</option>');
$.each(data, function(i, item){
$('#id_party-' + divName + '-second').append('<option value="' + item.pk + '">' + item.fields.name + '</option>');
});
$('#id_party-' + divName + '-second').val(setValue);
});