Auto populate select box using Javascript and jQuery - javascript

I have a select box:
<select id="translationOptions" name="translationOptions"></select>
And I have a js array
var translationOptions = ["Egyptian Hieroglyphs", "Al Bhed (Final Fantasy X)", "Futurama"];
How would I auto populate the select box based on the var translationOptions?

$.each(translationOptions, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
What is the best way to add options to a select from an array with jQuery?

$.each(translationOptions, function(index, value) {
$('#translationOptions').append($("<option />").val(index).text(value));
});
This uses text for display and index in the array for value.

You can create options dynamically and append to select box in this way as well.
jQuery.each(translationOptions, function(key, value) {
jQuery('<option/>', {
'value': key,
'text' : value
}).appendTo('#translationOptions');

Related

how do i make the option selected in append jquery in foreach

How can I make the option selected according to the value I get from value[0] in the loop?
$.each(data, function(key, value) {
$("#cektubuh").append(
`<tr>
<td>
<select name="duration_type[]" class="form-control" required>
// here I want to add the selected option according to $ {value [0]}
<option value="Semester">Semester</option>
<option value="Month">Month</option>
</select>
</td>
</tr>`
});
});
As you have not provided an example of the data, there is no way to know what values are being used here or how they compare. Here is a basic example based on what you have provided.
$.each(data, function(k, v) {
var row = $("<tr>").appendTo($("#cektubuh"));
var cell = $("<td>").appendTo(row);
var sel = $("<select>", {
name: "duration_type[]",
class: "form-control"
}).prop("required", true).appendTo(cell);
$("<option>", {
value: v[0]
}).html(v[0]).prop("selected", true).appendTo(sel);
$("<option>", {
value: "Semester"
}).html("Semester").appendTo(sel);
$("<option>", {
value: "Month"
}).html("Month").appendTo(sel);
});
If it's more complex or has multiple elements, please provide an example of the structure so that a more complete answer can be shown.
if you have value which belongs to options list and you want to show as selected option
just do this.
var value = 'some value';
$('name="duration_type[]"').val(value);
it will show that value as selected.

Dynamically add dropdownlist to table by using append()

Can i add dropdownlist to table by using jquery append.
Eg.
$(#table).append("<tr><td>#Html.DropDownList('TP',new SelectList(#Model.RefList, 'Value', 'Text',#Model.Ref))</td></tr>");
I dont known how to change this "#Html.Dropdownlist" to valid string.
you cannot add a server control with javascript, you can add an HTML select and load the options using ajax
$('#table').append('<select id="mySelect"></select>');
Example:
$.ajax({
url: "myServiceURL"
}).done(function(myOptions) {
$.each(myOptions, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
});
This Code will append Select menu to the last row of the table.
var select_list = '<select id="list">';
//you can add more options by repeating the next line & change text,value
select_list += '<option value="changevalue">change text</option>';
select_list += '</select>';
$("#table").append("<tr><td>"+select_list+"</td></tr>");

Array null in GUID

I have a array and i try to push items to array but it's shows me array is null.
In my scenario,my car model listbox(id is carmod) shows this id's
<option value="00000000-0000-0000-0000-000000000001">BMW</option>
<option value="00000000-0000-0000-0000-000000000002">Maruti</option>
<option value="00000000-0000-0000-0000-000000000003">Wagon</option>
My Code
var Intlst = [];
$("#carmod").each(function (index, item) {
debugger;
Intlst.push(item.value);//in here it shows me " " (double quotes)
});
You could try something like this:
$("#carmod option").each(function (index, item) {
Intlst.push(item.value);
});
In this way you will select all the option elements under the html element with id carmod. As it is now, your selector doesn't select all the option elements in the select html element.
.each works on the jQuery object which is array-like, not each option. Refine your selector or use $.find
$("#carmod option").each(function (index, item) {
Intlst.push(item.value);
});
using $.find
$("#carmod").find("option").each(function (index, item) {
Intlst.push(item.value);
});

Using an jQuery ARRAY to feed a SELECT OPTION

I have INPUT fields on my form which I want to collect the data input from them and store them in an ARRAY to then feed into a SELECT OPTION This is what I have so far, when it is used in the form it doesnt pick up the value from the INPUT boxes and the SELECT shows 2 empty rows, but has an ID against those rows as when I ouput the SELECT into another INPUT further on in my form it will show either 0 or 1.
How can I get the value input from the INPUT into the SELECT, also how can I then show the SELECTED option afterwards?
var MySelectOptions = [document.getElementById("inpbox1").value, document.getElementById("inpbox2").value];
$.each(MySelectOptions, function(key, value) {
$('#theselectbox').append($("<option/>", {
value: key,
text: value
}));
});
this is how I output from the SELECT, I would normally use the second example, but I don't know how to get the SELECTED Option within the code above
$(function() {
$("#theselectbox").change(function(){
var CustomerName = document.getElementById("theselectbox").value;
$('#customername').val(CustomerName);
});
});
How I normally get the SELECTED Option
$(function() {
$("#theselectbox").change(function(){
var CustomerName = $('option:selected', this).attr('theselectoption');
$('#customername').val(CustomerName);
});
});
You can append a new option with a value to select box as:
$('#theselectbox').append('<option value="'+inputValue+'">'+inputValue+'</option>');
And, you can show the selected option by using its value as:
$('#theselectbox').val(inputValue);
// Here you have the list of inputs, from which you will get values
// I will use classes, you can use ids
var inputs = ["input1", "input2"];
// The select to which you will paste the values
var sselect = $(".select-class");
for(var i = 0; i < inputs.length; i++){
var e = $("." + inputs[i]);
sselect.append("<option>"+ e.val() +"</option>");
}
// Now you can just put value to select
sselect.val("selected_value");
How select value from input
<input type="text" class="js-svalue" placeholder="Select value">
Now js
var input = $(".js-svalue");
input.on("change", function(){
sselect.val(input.val());
});

Dropdown populated using jquery : values not getting posted in the form

I had to change the values of a dropdown basis the selection of a radio button so i used jquery to check the selected radio button and populated the dropdown accordingly.
Now, when i select a value from the dropdown and submit the form the dropdown value doesnt get posted. Please help.
The code i used :
<select style="width:120px; margin-left:5px;" name="sPriceMin1" id="describe1">
<option value="" selected>Min Price</option>
in the script :
var listA = [{name:'0', value:'0'}, {name:'10 Lacs', value:'1000000'}, {name:'20 Lacs', value:'2000000'},{name:'30 Lacs', value:'3000000'},{name:'50 Lacs', value:'5000000'},{name:'70 Lacs', value:'7000000'},{name:'1 Cr', value:'10000000'},{name:'1.5 Cr', value:'15000000'},{name:'2 Cr', value:'20000000'},{name:'3 Cr', value:'30000000'},{name:'5 Cr', value:'50000000'}];
$(document).ready( function() {
$('#describe1').empty();
$.each(listA, function(index, value) {
$('#describe1').append('<option value="'+value.value+'">'+value.name+'</option>');
});
});
I am unable to fetch the values of the dropdown in my php code.
Please help.
Try creating the select option's this way:
$(document).ready( function() {
var dd = $('#describe1');
dd.empty();
$.each(listA, function() {
$("<option />", {
val: this.value,
text: this.name
}).appendTo(dd);
});
});
Also, make sure that your select is inside the form tag.
Since you did not post the PHP code, it is difficult to tell if this advice will help you.

Categories