My code loads the list drop down, but the option isn't selected. How can I set a default selected option?
Javascript:
var options = '';
options += '<option value="00">-- Pilih Salah Satu --</option>';
for (var s=0;s<json.kec.length;s++) {
options += '<option value="' + json.kec[s].dist + '">'
+ json.kec[s].dist+json.kec[s].name + '</option>';
}
$("select#kecamatan").html(options);
Any help is appreciated.
Is this javascript is on a function, if it is:
function getValues(default_value) {
var options = '';
options += '<option value="00">-- Pilih Salah Satu --</option>';
for (var s=0;s<json.kec.length;s++) {
if(json.kec[s].dist == default_value) {
options += '<option value="' + json.kec[s].dist + '" selected>' + json.kec[s].dist+json.kec[s].name + '</option>';
} else {
options += '<option value="' + json.kec[s].dist + '">' + json.kec[s].dist+json.kec[s].name + '</option>';
}
}
$("select#kecamatan").html(options);
}
Hope it helps.
You need to place a if check for what value you want to make the option selected and in if section you need to add selected="selected" as option tag attribute
var options = '';
options += '<option value="00">-- Pilih Salah Satu --</option>';
for (var s=0;s<json.kec.length;s++) {
if(your condition to make option selected)
options += '<option value="' + json.kec[s].dist + '" selected="selected">'
+ json.kec[s].dist+json.kec[s].name + '</option>';
}
else if(your condition to make option not selected)
{
options += '<option value="' + json.kec[s].dist + '">'
+ json.kec[s].dist+json.kec[s].name + '</option>';
}
$("select#kecamatan").html(options);
Related
if (itemPrice != null) {
var option = null;
for (var i = 0; i < itemPrice.d.length; i++) {
option += '<option value=' + itemPrice.d[i].ListNum + '>' + itemPrice.d[i].ListName + '</option>';
}
} else {
SessioExp(response.statusText);
}
tblRow += '<td style="width:20%"><div id="' + d.ItemCode + '"><select class="customSelect" name="dropdown" >' + option + '</select></div></td>';
$.each(itemLinked, function (k, v) {
if (d.ItemCode == v.ITEMCODE) {
//Here set v.PRICELIST TO OPTION VALUE
if (v.ISLINKED) {
tblRow += '<td style="width:10%" align="center"><span id="existingData" class="fa fa-times" aria-hidden="false" style="display: none;"></span></td>';
tblRow += '<td style="width:10%" align="center"><input type="checkbox" class="chkLinked" checked /></td>';
flage = false;
}
}
});
I want set select box value when condition true if (d.ItemCode == v.ITEMCODE)
tblRow += '<td style="width:20%"><div id="' + d.ItemCode + '"><select class="customSelect" name="dropdown" >' + option + '</select></div></td>';
Here we want to show first saved value.
Assuming that your generated options have been appended to the html, you can simply call the JS function optionID.selected = true
So for that you will need to define ids to all your options
// assuming that all your values are unique
for (var i = 0; i < itemPrice.d.length; i++) {
option += '<option id=' + itemPrice.d[i].ListNum + ' value=' + itemPrice.d[i].ListNum + '>' + itemPrice.d[i].ListName + '</option>';
}
//pass the option id here
//P.S you can only call this funtion only if the options have been appended to the html
function defineOption(optionID) {
document.getElementById(optionID).selected = true;
}
I have cascading dropdown menus as below. I am listing selections dynamically on second and third dropdowns. While the first on change function works without problem (i am getting project list), the second on change ( $("#pro").on('change', function(e) ) simply doesn't sense any change on selection of projects. Chrome console shows no problem. What can be the problem?
<div class="form-group">
<label for="projectfamily">Proje Grubu</label>
<select class="form-control" name="projectfamily" id="projectfam">
<option value="">Seçiniz</option>
#foreach($projectfamilies as $projectfamily)
<option value= "{{$projectfamily->id}}">{{$projectfamily->projectfamily}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="project">Proje Adı</label>
<select class="form-control" name="project" id="pro">
<option value= "" disabled></option>
</select>
</div>
<div class="form-group">
<label for="version">Versiyon</label>
<select class="form-control" name="version" id="version">
<option value="" disabled></option>
</select>
</div>
JQuery
$('#projectfam').on('change', function(e) {
var projectfam = e.target.value;
$.get('/ajax_projectfamily_post?projectfam=' + projectfam, function(data){
$('#pro').empty();
$('#version').empty();
$('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger){
$('#pro').append('<option value="' + deger.id + '">' + deger.project + '</option>');
});
});
});
$("#pro").on('change', function(e) {
var project = e.target.value;
$.get('/ajax_project_post?project=' + project, function(data){
$('#version').empty();
$('#version').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger) {
$('#version').append('<option value="' + deger.id + '">' + deger.version + '</option>');
});
});
});
It appears to work as expected in chrome. See this fiddle with the ajax calls replaced. Is it a problem with the ajax call? Or perhaps an html syntax error? Check the validity of your entire HTML page. Since you only posted a fragment I can't diagnose further.
$('#projectfam').on('change', function(e) {
var projectfam = e.target.value;
var data = ['a', 'b', 'c'];
$('#pro').empty();
$('#version').empty();
$('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger){
$('#pro').append('<option value="' + data[i] + '">' + data[i] + '</option>');
});
});
$("#pro").on('change', function(e) {
var project = e.target.value;
var data = ['x', 'y', 'z'];
$('#version').empty();
$('#version').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger) {
$('#version').append('<option value="' + data[i] + '">' + data[i] + '</option>');
});
});
I would do it like this, I had a similar problem before, the onchange events need to be assigned after the elements are loaded:
$('#projectfam').on('change', function(e) {
var projectfam = e.target.value;
$.get('/ajax_projectfamily_post?projectfam=' + projectfam, function(data){
$('#pro').empty();
$('#version').empty();
$('#pro').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger){
$('#pro').append('<option value="' + deger.id + '">' + deger.project + '</option>');
});
addOnChangeThingy(); // load onclick functions
});
});
function addOnChangeThingy(){
$("#pro").on('change', function(e) {
var project = e.target.value;
$.get('/ajax_project_post?project=' + project, function(data){
$('#version').empty();
$('#version').append('<option value="' + '">' + "Seçiniz" + '</option>');
$.each(data, function(i, deger) {
$('#version').append('<option value="' + deger.id + '">' + deger.version + '</option>');
});
});
});
}
Attempting to populate a drop down menu with JSON data but cant quite figure out what I am doing wrong.
JSON Data
{"dropdownValue1":"1x1","dropdownDisplay1":"1x1","dropdownValue2":"1x2","dropdownDisplay2":"1x2","dropdownValue3":"1x3","dropdownDisplay3":"1x3","dropdownValue4":"1x4","dropdownDisplay4":"1x4","dropdownValue5":"1x5","dropdownDisplay5":"1x5","dropdownValue6":"1x6","dropdownDisplay6":"1x6"}
Java/HTML
<script type="application/javascript">
$(function(){
$("select#size").change(function(){
$.getJSON("getDropdown",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + i + '">' + j[i] + '</option>';
}
$("select#size").append(options);
})
})
}) </script>
<div class="input select orderBoxContent">
<select name="size" id="size">
</select>
</div>
Actual JSON request
function getDropdown()
{
var people_no = $('#howmanypeople').val();
$.getJSON("../../getdata.php?getDropdown=yes&people_no="+people_no, function(response) {
$('#getDropdown').html(response.getDropdown);
});
}
Cheers
Ryan
Your JSON is an object but you are itterating it like an array.
var i;
for (i in j) {
if (j.hasOwnProperty(i)) {
// i = 'dropdownValue1'
// j[i] = "1x1"
// but the order is unknown
options += '<option value="' + j[i] + '">' + j[i] + '</option>';
}
}
$(function(){
$("select#size").change(function(){
$.getJSON("getDropdown",{id: $(this).val(), ajax: 'true'}, function(j){
var i;
for (i in j) {
if (j.hasOwnProperty(i)) {
// i = 'dropdownValue1'
// j[i] = "1x1"
// but the order is unknown
options += '<option value="' + j[i] + '">' + j[i] + '</option>';
}
}
$("select#size").append(options);
})
})
})
function createShiftsForm(day){
document.getElementById("shifts").innerHTML += day + ' morn: <select name="' + day + 'm"><option value="0" selected>0</option>';
for (i=1; i <= 20; i++){
document.getElementById("shifts").innerHTML += '<option value="' + i + '">' + i + '</option>';
}
document.getElementById("shifts").innerHTML += '</select>';
}
When it prints out it prints all 21 numbers but only the number 0 is printed as an option for the selector.
The string that you pass to the innerHTML is not valid(you do it step-by-step, so select element doesn't have a closing tag).
function createShiftsForm(day){
var container = day + ' morn: <select name="' + day + 'm"><option value="0" selected>0</option>';
for (i=1; i <= 20; i++){
container += '<option value="' + i + '">' + i + '</option>';
}
container += '</select>';
document.getElementById("shifts").innerHTML = container;
}
I have this dropdown filter that is generated from a DB. It gives the selection list for users to select from.
This is the sample product list.
-View All-
-iPhone-
-Android-
-WindowsPhone-
-Blackberry-
However, I want to make the 'iPhone' string to bold face in this script code.
Please advice kindly?
var dropdown= function( response ){
var productFilter = $('.dropdownControl');
productFilter .change( userMgmtFilterDDChange );
var pdlist= response.Results.Products;
var dropdownString = '';
dropdownString += '<option selected="selected">View All</option>';
$.each( pdlist, function( index, item ){
dropdownString += '<option>' + item.Name + '</option>';
});
productFilter .append( dropdownString );
}
Add a class in jQuery if the name is iPhone, that way :
$.each( pdlist, function( index, item ){
if (item.Name == 'iPhone'){
dropdownString += '<option class="bold">' . item.Name . '</option>';
}
else{
dropdownString += '<option>' + item.Name + '</option>';
}
});
Then, in your css file, use this
.bold{
font-weight: bold;
}
Change this
dropdownString += '<option>' + item.Name + '</option>';
To that
dropdownString += '<option>' + (item.Name==Iphone ?'<b>'+item.name+'</b>': item.name) + '</option>';