How to do a javascript function for autocomplete with images? - javascript

I'm trying to do a function that returns a list of search with autocomplete. I have to use a . The final result must be something like this:
http://www.casimages.com.br/i/150325064429419254.png.html
I have done this another autocomplete
html
<label class="formee-lbl">
Região Fiscal
</label>
Js:
<script type="text/javascript">
var availableTags = [
"DFR - SÃO JOSÉ DOS CAMPOS",
"DFR - ARARAGUARA",
"DFR - FRANCA",
"DFR - JUNDIAI",
"DFR - PIRACICABA",
"DFR - BARUERI",
"DERPF - SÃO PAULO",
"DFR - CURITIBA",
"DFR - LONDRINA",
"DFR - CASCAVEL"
];
var availableUnidades = [
"UNIDADE: DFR - SÃO JOSÉ DOS CAMPOS",
"UNIDADE: DFR - ARARAGUARA",
"UNIDADE: DFR - FRANCA",
"UNIDADE: DFR - JUNDIAI",
"UNIDADE: DFR - PIRACICABA",
"UNIDADE: DFR - BARUERI",
"UNIDADE: DERPF - SÃO PAULO",
"UNIDADE: DFR - CURITIBA",
"UNIDADE: DFR - LONDRINA",
"UNIDADE: DFR - CASCAVEL"
];
$(document).ready(function () {//Carrega a função junto com a página
$("#autocomplete").autocomplete({
source: availableTags
});
$("#autocompleteUnidades").autocomplete({
source: availableUnidades
});
});
</script>
What I have to do to add any image to the autocomplete function?
Is there something else I can use?

With jQuery you can write your own renderers
$(document).ready(function () {
//...here is the projects source
$("#autocomplete").autocomplete({
source: availableTags,
create: function () {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $('<li>')
.append('<a><img src="'+ item.image +'">' + item.label + '<br>' + item.value + '</a>')
.appendTo(ul);
};
}
});
});

Related

Alert an array with while loop

Using while loop, I want to alert names with their number from an array. I also have to put every name in a single alert.
Script:
var voetbalteam = 1;
var spelers = ["Nobert Alblas", "Kostas Lamprou", "André Onana", "Benjamin van Leer", "Léon Bergsma", "Damil Dankerlui", "Matthijs de Ligt", "Mitchell Dijks", "Luis Orejuela", "Daley Sinkgraven", "Joël Veltman", "Nick Viergever", "Max Wöber", "Deyovaisio Zeefuik", "Frenkie de Jong", "Siem de Jong", "Carel Eiting", "Noussair Mazaoui", "Lasse Schöne", "Donny van de Beek", "Klaas Jan Huntelaar", "Kasper Dolberg", "Justin Kluivert"];
while ((voetbalteam <= 23) + (spelers >= 0)){
alert("Ik ben " + spelers[spelers] + " En ik ben de " + voetbalteam + "e speler.");
spelers ++;
voetbalteam ++;
}
Use forEach() to loop over the array.
var voetbalteam = 1;
var spelers = ["Nobert Alblas", "Kostas Lamprou", "André Onana", "Benjamin van Leer", "Léon Bergsma", "Damil Dankerlui", "Matthijs de Ligt", "Mitchell Dijks", "Luis Orejuela", "Daley Sinkgraven", "Joël Veltman", "Nick Viergever", "Max Wöber", "Deyovaisio Zeefuik", "Frenkie de Jong", "Siem de Jong", "Carel Eiting", "Noussair Mazaoui", "Lasse Schöne", "Donny van de Beek", "Klaas Jan Huntelaar", "Kasper Dolberg", "Justin Kluivert"];
spelers.forEach(function(key, value){
console.log("Ik ben " + key + " En ik ben de " + (value + 1) + "e speler.");
});
Using a while loop, use voetbalteam as an iterator and increment it inside the while loop.
var voetbalteam = 0;
var spelers = ["Nobert Alblas", "Kostas Lamprou", "André Onana", "Benjamin van Leer", "Léon Bergsma", "Damil Dankerlui", "Matthijs de Ligt", "Mitchell Dijks", "Luis Orejuela", "Daley Sinkgraven", "Joël Veltman", "Nick Viergever", "Max Wöber", "Deyovaisio Zeefuik", "Frenkie de Jong", "Siem de Jong", "Carel Eiting", "Noussair Mazaoui", "Lasse Schöne", "Donny van de Beek", "Klaas Jan Huntelaar", "Kasper Dolberg", "Justin Kluivert"];
while (voetbalteam < spelers.length){
console.log("Ik ben " + spelers[voetbalteam] + " En ik ben de " + (voetbalteam + 1) + "e speler.");
voetbalteam ++;
}
consider using console.log() instead of alert() when you are coding.
alert() is blocking
alert() cannot be easily suppressed in non-debug environment
console typically formats your objects nicely and allows to traverse
them
logging statements often have an interactive pointer to code which
issued logging statement
you cannot look at more than one alert() message at a time
consoles can have different logging levels with intuitive formatting
The above text was taken from here
If you really want to use a while loop, try this:
var voetbalteam = 0;
var spelers = ["Nobert Alblas", "Kostas Lamprou", "André Onana", "Benjamin van Leer", "Léon Bergsma", "Damil Dankerlui", "Matthijs de Ligt", "Mitchell Dijks", "Luis Orejuela", "Daley Sinkgraven", "Joël Veltman", "Nick Viergever", "Max Wöber", "Deyovaisio Zeefuik", "Frenkie de Jong", "Siem de Jong", "Carel Eiting", "Noussair Mazaoui", "Lasse Schöne", "Donny van de Beek", "Klaas Jan Huntelaar", "Kasper Dolberg", "Justin Kluivert"];
while (voetbalteam < spelers.length){
alert("Ik ben " + spelers[voetbalteam] + " En ik ben de " + (voetbalteam + 1) + "e speler.");
voetbalteam++;
}

Sending parameter from JS to asp.net

I'm trying to send a list of parameters from JS to an asp.net file, but the file is not receiving the parameters correctly. Sometimes I get the message "Undefined".
Here's my code:
JavaScript
<script type="text/javascript">
$(document).on("click", "[id*=lnkView]", function () {
$("#nome").html($(this).closest("tr").find("td.sDisplayName").text());
$("#Product").html($(this).closest("tr").find(".Produto").text());
$("#IP").html($(this).closest("tr").find("td.sNetworkAddress").text());
$("#DC").html($(this).closest("tr").find("td.dc").text());
$("#comentario").html($(this).closest("tr").find("td.sComment").text());
$("#inicio").html($(this).closest("tr").find("td.inicio").text());
$("#mensagem").html($(this).closest("tr").find(".mensagem").text());
$("#monitor").html($(this).closest("tr").find("td.sMonitorTypeName").text());
$("#dialog").dialog({
width: 1000,
title: "Detalhes para TP",
buttons: {
var width = 150;
var height = 250;
var left = 99;
var top = 99;
var janeleira = window.open("outlookPrimeiro.aspx?" + FIRST VALUE FROM THE FUNCTION ABOVE , 'janela', 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left + ', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no, setTimeout=1000');
//window.open("outlookPrimeiro.aspx");
//janeleira.onload = function () { janeleira.setTimeout('janeleira.close()', 1000); }
//setTimeout(function () { janeleira(); }, 1);
},
ok: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
function blinker() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
}
setInterval(blinker, 1000); //Runs every second
ASP.NET
using System;
using System.Text;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
//NECESSÁRIO PARA USAR MARSHALL
using System.Runtime.InteropServices;
//NECESSARIO PARA USAR O OUTLOOK
using aqueleLance = Microsoft.Office.Interop.Outlook;
using OutlookApp = Microsoft.Office.Interop.Outlook.Application;
using testeUsingPrimeiro = Microsoft.Office.Interop.Outlook._AutoFormatRule;
using testeUsingSegundo = Microsoft.Office.Interop.Outlook._AutoFormatRules;
using testeUsingTerceiro = Microsoft.Office.Interop.Outlook.AutoFormatRule;
using testeUsingQuarto = Microsoft.Office.Interop.Outlook.AutoFormatRules;
public partial class outlookPrimeiro : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
String nomeDevice = null;
if (Request.QueryString != null)
{
// Seta banco dados
nomeDevice = Request.QueryString.ToString();
}
//DEFINICICOES DE DADOS DO E-MAIL A SER ENVIADO
String paraEmail = "para#email.com.br";
String copiaEmail = "mateus.pereira#linx.com.br";
//String copiaOculta = "";
String assuntoEmail = "Using Outlook 2013";
String corpo = "<html><body><div style='width:95%;text-align: center;background-color: black'><table style='width: 100%;text-align: center'><tr style='background-color:#5B2E90'><td style='color: white'>Prioridade</td><td style='color: white'>Acionamento</td><td style='color: white'>KBN</td><td style='color: white'>Device</td><td style='color: white'>IP</td><td style='color: white'>DC</td><td style='color: white'>WUG</td><td style='color: white'>Diretorio</td><td style='color: white'>Monitor</td><td style='color: white'>Comentario</td><td style='color: white'>Tempo Down</td><td style='color: white'>Inicio</td><td style='color: white'>TP</td></tr><tr><td style='color: orange'>Prioridade</td><td style='color: orange'>Acionamento</td><td style='color: orange'>KBN</td><td style='color: orange'>"+ nomeDevice + "</td><td style='color: orange'>IP</td><td style='color: orange'>DC</td><td style='color: orange'>WUG</td><td style='color: orange'>Diretorio</td><td style='color: orange'>Monitor</td><td style='color: orange'>Comentario</td><td style='color: orange'>Tempo Down</td><td style='color: orange'>Inicio</td><td style='color: orange'>TP</td></tr></table></div></body></html>";
//banco(?)
//string host = "127.0.0.1\SQLEXPRESSNOC";
//string usuario = "NOME DO USUÁRIO";
//string senha = "SENHA DO USUARIO";
//string banco = "NOME DO USUARIO";
//CRIA NOVO APP USANDO Microsoft.Office.Interop.Outlook.Application
OutlookApp appDoOutlook = new OutlookApp();
//CRIA E-MAIL
aqueleLance.MailItem itemDoMail = appDoOutlook.CreateItem(aqueleLance.OlItemType.olMailItem) as aqueleLance.MailItem;
//QUAL CONTA VAI ENVIAR? NECESSÁRIO TER A CONTA NA MÁQUINA
string nomeDaConta = "para#email.com.br";
//CRIA SESSÃO
aqueleLance.NameSpace sessao = itemDoMail.Session;
//PEGA CONTAS PRESENTES NA MÁQUINA
aqueleLance.Accounts contaAccounts = sessao.Accounts;
//FOR 1 ATÉ FINAL DO NÚMERO DE CONTAS
for (int i = 1; i <= contaAccounts.Count; i++)
{
//aqueleLance.Account contaAccount RECEBE O VALOR DO FOR
aqueleLance.Account contaAccount = contaAccounts[i];
//SE A CONTA EXISTE, ELE VAI ENVIAR
//(COMPARAÇÃO FEITA EM LOWER CASE
if (contaAccount.DisplayName.ToLower() == nomeDaConta.ToLower())
{
//COMANDO PARA ENVIAR USANDO A CONTA XXXXX
itemDoMail.SendUsingAccount = contaAccount;
//LIBERA VARIAVEL
Marshal.ReleaseComObject(contaAccount);
//PARA O COMANDO
break;
}
}
//PARA QUEM ENVIA O E-MAIL
itemDoMail.To = paraEmail;
//ENVIAR COM COPIA PARA
itemDoMail.CC = copiaEmail;
//COPIA OCULTA
//itemDoMail.BCC = copiaOculta;
//ASSUNTO DO EMAIL
itemDoMail.Subject = assuntoEmail;
//CORPO DO EMAIL EM HTML
itemDoMail.HTMLBody = corpo;
//"<html><body>Enviado pelo <strong>Outlook</strong> 2013<br/> Teste do envio com CC e BCC.<br/><br/></body></html>"
//IMPORTANCIA DO EMAIL
itemDoMail.Importance = aqueleLance.OlImportance.olImportanceHigh;
//ENVIA O EMAIL
//NÃO É POSSÍVEL VER ANTES DE ENVIAR SEM HABILITAR O DISPLAY ABAIXO
//itemDoMail.Send();
//HABILITE ISSO PARA VER A MENSAGEM ANTES DE ENVIAR
//PRECISA TIRAR O SEND ACIMA
itemDoMail.Display(false);
//LIBERA CONTAS
Marshal.ReleaseComObject(contaAccounts);
//LIBERA SESSÃO
Marshal.ReleaseComObject(sessao);
}
}
The variables you are posting should be assigned to a parameter. Your querystring doesn't seem to start with a variablename.
Request.QueryString is a collection of variables that you can post.
Request the page like this:
window.open("outlookPrimeiro.aspx?variablename=" + value);
Consecutive variables should be added with the & sign:
window.open("outlookPrimeiro.aspx?variablename=" + value + "&variablename2= " + value2);
On the serverside you can read the variable like this:
string variable = Request.QueryString["variablename"]

Get inner value of a xml node inside a javascript loop

I've a xml file with 10 "item entries" in the following format:
<channel>
<title>Search products</title>
<link>http://v2-bienaldolivrosp.rxnova.com/feeds/search/Products/?startRecord=1</link>
<description>Bienal do Livro de Sao Paulo search</description>
<language>pt-BR</language>
<item>
<guid isPermaLink="true">http://www.bienaldolivrosp.com.br/pt-BR/Exhibitors/376354/Manole-Conteudo/Products/716223/Gestao-de-Pessoas-4-ed-O-Novo-Papel-dos-Recursos-Humanos-nas-Organizacoes</guid>
<link>http://www.bienaldolivrosp.com.br/pt-BR/Exhibitors/376354/Manole-Conteudo/Products/716223/Gestao-de-Pessoas-4-ed-O-Novo-Papel-dos-Recursos-Humanos-nas-Organizacoes</link>
<title>Gestão de Pessoas 4ª ed. - O Novo Papel dos Recursos Humanos nas Organizações</title>
<description>A obra parte dos novos desafios da gestão de pessoas e direciona a atenção do leitor para seis ações que, inerentemente, se conectam em rede: agregar, recompensar, desenvolver, monitorar, manter e, por fim, aplicar pessoas. </description>
<pubDate>Fri, 25 Jul 2014 20:17:53 Z</pubDate>
<enclosure url="http://www.bienaldolivrosp.com.br/__novaimages/596889" type="image/jpg" length="1000" />
</item>
</channel>
I'm running the following code to parse the xml:
for (i = 0; i < values.length; i++) {
text += values[i]['title'] + " - " + "<br>";
}
The above code works fine but the problem is that I need to get the url inside de "enclosure url" node and I can't figure out how to do it.
Any help?
Try this one:
text +=
values[i]['title'] + " - " +
values[i]['enclosure'].getAttribute('url') +
" - " +
"<br>"
;
I may be wrong but... ^_^
I expect it will give output like:
"Gestão de Pessoas 4ª ed. - O Novo Papel dos Recursos Humanos nas Organizações - http://www.bienaldolivrosp.com.br/__novaimages/596889 - <br>"
Version 0.2:
text += values[i]['title'] + " - ";
if ( typeof values[i]['enclosure'] === 'undefined' ) {
text += 'Undefined Enclosure';
} else {
console.log( values[i]['enclosure'] );
text += values[i]['enclosure'].getAttribute('url');
}

How to print data from this JSON Javascript?

I have the code from json, and i would like to print them out to html page.
{"offset":0,
"results":[
{"link_1/_text":"Reflection",
"text_1":"January 30, 2015",
"link_3":"http://pmj.astaga.com/article/?p=414",
"link_1":"http://pmj.astaga.com/article/?cat=67",
"link_3/_text":"Meditasi: Makna Rasa Sakit",
"text_list_1":["kebahagiaan","meditasi","Meditasi: Makna Rasa Sakit |Matchmatter.com","on pain kahlil gibran","puisi kahlil gibran"],
"image_1":"http://pmj.astaga.com/article/wp-content/uploads/2015/01/Inspirational-Quotes-Image-Khalil-Gibran.jpg",
"title_text":"Meditasi: Makna Rasa Sakit",
"text_2":"Semua manusia yang hidup di dunia ini ingin merasakan kebahagiaan, dalam bentuk apapun."
},
{"link_1/_text":"Love and Sex",
"text_1":"January 26, 2015",
"link_3":"http://pmj.astaga.com/article/?p=411",
"link_1":"http://pmj.astaga.com/article/?cat=64",
"link_2":"http://pmj.astaga.com/article/?cat=65",
"link_3/_text":"Take and Give",
"text_list_1":["memberi dan menerima","men","Take and Give","Women"],
"image_1":"http://pmj.astaga.com/article/wp-content/uploads/2015/01/article-2289562-187F97F8000005DC-947_634x482.jpg",
"title_text":"Take and Give",
"text_2":"Untuk beberapa alasan yang sulit dimengerti, alam telah membagi pria dan wanita dalam sebuah perbedaan sikap dalam memandang sebuah hal.",
"link_2/_text":"Men"
},
{"link_1/_text":"Women",
"text_1":"January 23, 2015",
"link_3":"http://pmj.astaga.com/article/?p=404",
"link_1":"http://pmj.astaga.com/article/?cat=71",
"link_3/_text":"10 Saran Bagi Wanita Untuk Menyatakan Cinta Lebih Dulu",
"text_list_1":["10 saran jika ingin menyatakan cinta","menyatakan cinta",
"menyatakan cinta kepada pria","menyatakan cinta lebih dulu",
"Mungkinkah Seorang Wanita Menyatakan Cintanya Lebih Dulu?|Matchmatter.com","wanita"],
"image_1":"http://pmj.astaga.com/article/wp-content/uploads/2015/01/secret-admirer.jpg",
"title_text":"10 Saran Bagi Wanita Untuk Menyatakan Cinta Lebih Dulu",
"text_2":"Apakah anda pernah menyukai seorang pria, dan dilihat dari gelagatnya sepertinya dia juga menyukai anda?"
}
],
"cookies":[],
"connectorVersionGuid":"ed0ce142-861e-4d2e-bacd-3dd1de491a69",
"connectorGuid":"d6d21746-2d8f-4980-b1ec-8e1a5d52b133",
"pageUrl":"http://pmj.astaga.com/article/?page_id=709"
}
But the problem is, i got more than one string to call the data, for example
"link_1/_text":"Reflection"
If i use this code i will got Just the URL and not title or content
<script>
var data = '$json_data';
$(data.results).each(function() {
var output = "<p>" + this.link_1 + "</p>";
$('#placeholder').append(output);
});
</script>
The point is, how to print results of Reflection
Can you help me for this code?
Thankyou
Using your syntax, you can use both jquery or javascript to iterate on the JSON.
var data = {---YOUR JSON...};
using JQuery
$(data.results).each(function () {
var output = "<div class='container'>";
output += "<p>" + this.title_text + "</p>";
output += "<p>" + this.text_1 + "</p>";
output += "<p>" + this.link_1 + "</p>";
output += "</div>";
$('#placeholder1').append(output);
});
using Javasscript
var d=document.getElementById("placeholder2");
var output="";
for (var i in data.results) {
output += "<div class='container'>";
for (var prop in data.results[i]) {
output += "<p>" + prop + " : " + data.results[i][prop] + "</p>";
}
output += "</div>";
}
d.innerHTML=output;
Here the JSFiddle example
You can use Jquery.parseJSON(). This will give you a js object which you can use to achieve what you want.
var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );
You need to do something like this:
var json = [
{ "one": "1" },
{ "two": "2" },
{ "three": "3" }
];
$.each(json, function() {
$.each(this, function(name, value) {
/// do stuff
console.log(name + '=' + value);
});
});

How to add value from select option with array

I have create bellow code and now i want to add value inside select option. Curently i am not getting value in all there drop downbox. For example you can set your option value to help me.
I have created array like this way:
var d = new Array("Any","D01 Boat Quay / Raffles Place","D02 Chinatown / Tanjong Pagar","D03 Alexandra / Commonwealth","D04 Harbourfront / Telok Blangah");
var options = '';
for (var i = 0; i < d.length; i++) {
options += '<option>' + d[i] + '</option>';
}
$("#TypeList1").html(options);
sb2.sync();
I have tried with this code:
var dd = {
Any : 'Any',
1 : 'D01 Boat Quay / Raffles Place',
2 : 'D02 Chinatown / Tanjong Pagar',
36 : 'D03 Alexandra / Commonwealth',
37 : 'D04 Harbourfront / Telok Blangah',
38 : 'D05 Buona Vista / West Coast'
};
var select = document.getElementById("TypeList1");
for(index in dd) {
select.options[select.options.length] = new Option(dd[index], index);
}
MY CODE:
<!doctype html>
<html>
<head>
<title>Custom Styled Selectbox</title>
<link rel="stylesheet" href="http://www.roblaplaca.com/docs/custom-selectbox/css/customSelectBox.css" />
<!--<link rel="stylesheet" href="customSelectBox.css" />-->
</head>
<body class="noJS">
<script type="text/javascript">
try{Typekit.load();}catch(e){}
var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
</script>
<style type="text/css">
.hasJS select.custom1 {
position: absolute;
left: -999em;
}
</style>
<div class="grid-system clearfix">
<div class="row">
<div class="col span-9">
<div class="example clearfix">
<select class="custom interactive" id="properties">
<!--<option value="selectone">Select a Type</option>-->
<option value="One" selected>One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
<select class="custom interactive" id="TypeList">
<option selected>Any</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
<select class="custom1 interactive1" id="TypeList1">
</select>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js"></script>
<script src="http://www.roblaplaca.com/docs/custom-selectbox/js/SelectBox.js"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.jscrollpane.js"></script>
<script src="SelectBox.js"></script> -->
<script type="text/javascript">
$(function() {
window.prettyPrint && prettyPrint()
/*
This is how initialization normally looks.
Typically it's just $("select.custom"), but to make this example more clear
I'm breaking from the pattern and excluding interactive
*/
var sb, sb2;
$("select.custom").not(".interactive").each(function() {
sb = new SelectBox({
selectbox: $(this),
height: 150,
width: 200
});
});
$("select.custom1").not(".interactive").each(function() {
sb2 = new SelectBox({
selectbox: $(this),
height: 150,
width: 250
});
});
/*
Adding some extra functionality for "interactive" selects
*/
var TypeList = {
//selectone: ["Any"],
'One': ["Any", "Landed", "Condominium", "HDB", "Others"],
'Two': ["Any", "Landed", "Condominium", "HDB", "Others"],
'Three': ["Any", "Industrial", "Retail", "Land", "Office", "Others"],
'Four': ["Any", "Industrial", "Retail", "Land", "Office", "Others"]
}
var defaultSelectboxSettings = {
height: 150,
width: 150
};
var country_SB = null,
city_SB = null;
$("select.interactive").each(function() {
if ($(this).attr("id") == "properties") {
country_SB = new SelectBox($.extend(defaultSelectboxSettings, {
selectbox: $(this),
changeCallback: function(val) {
if (TypeList[val]) {
city_SB.enable();
updateCities(val);
}
if (val == "selectone") {
city_SB.disable();
}
<!------------------------------Code By Me---------------------------->
var getType = jQuery( "#TypeList option:selected" ).text();
if(getType == "HDB"){
var e = new Array("Any","Boat Quay","Chinatown","Havelock Road","Marina Square");
var options = '';
for (var i = 0; i < e.length; i++) {
options += '<option>' + e[i] + '</option>';
}
$("#TypeList1").html(options);
sb2.sync();
}else{
var d = new Array("Any","D01 Boat Quay / Raffles Place","D02 Chinatown / Tanjong Pagar","D03 Alexandra / Commonwealth","D04 Harbourfront / Telok Blangah");
var options = '';
for (var i = 0; i < d.length; i++) {
options += '<option>' + d[i] + '</option>';
}
$("#TypeList1").html(options);
sb2.sync();
}
<!------------------------------Code By Me---------------------------->
}
}));
} else if ($(this).attr("id") === "TypeList") {
city_SB = new SelectBox($.extend(defaultSelectboxSettings, {
selectbox: $(this)
}));
}
//if(jQuery( "#properties option:selected" ).text())
});
updateCities($("#properties").val());
if ($("#properties").val() == "selectone") {
//city_SB.disable();
}
<!------------------------------Code By Me---------------------------->
if(jQuery( "#TypeList option:selected" ).text()){
var dd = new Array("Any","D01 Boat Quay / Raffles Place","D02 Chinatown / Tanjong Pagar","D03 Alexandra / Commonwealth","D04 Harbourfront / Telok Blangah");
var options = '';
for (var i = 0; i < dd.length; i++) {
options += '<option>' + dd[i] + '</option>';
}
$("#TypeList1").html(options);
sb2.sync();
}
<!------------------------------Code By Me---------------------------->
function updateCities(val) {
var $select = $("select#TypeList"),
html = "";
for (var i = 0; i < TypeList[val].length; i++) {
html += '<option value="' + TypeList[val][i] + '">' + TypeList[val][i] + '</option>';
}
$select.html(html);
// HACK: chrome is too fast?
setTimeout(function() {
city_SB.sync();
}, 1);
}
});
</script>
</body>
</html>
Any ideas or suggestions? Thanks.
your array can look like this
var options = [{
option: option1,
value: value1
}, {
option: option2,
value: value2
}];
You will then loop over that json array like so
for (var i = 0; i < options.length; i++) {
var option = options[i];
}
and change this line
options += '<option>' + d[i] + '</option>';
to (add this into the for loop)
options += '<option value="' + d.value + '">' + d.option + '</option>';
Do as follows:
Prepare json object as follows:
var data = [
{
"id": "id1",
"name": "name1"},
{
"id": "id2",
"name": "name2"}
];
Then prepare options list as follows:
$.each(data, function(i, option) {
$('#sel').append($('<option/>').attr("value", option.id).text(option.name));
});

Categories

Resources