jQWidgets Forums
jQuery UI Widgets › Forums › Lists › DropDownList › PHP
Tagged: DropDownList, jqxDropDownList
This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 7 months ago.
-
AuthorPHP Posts
-
Hi Peter,
I try to build a DropDownList in HTML for input different particulars via PHP in my database. So Name-Input, Date-Input works, but not DropDownList. Here is part of my code:
//DropDownList Stationen
var station = [
{label:”SZNA”, value: ‘SZNA’},
{label:”1A”, value: ‘1A’},
{label:”1C”, value: ‘1C’},
{label:”1D”, value: ‘1D’},
{label:”2A”, value: ‘2A’},
{label:”2B”, value: ‘2B’},
{label:”2C”, value: ‘2C’},
{label:”2D”, value: ‘2D’},
{label:”3A”, value: ‘3A’},
{label:”3B”, value: ‘3B’},
{label:”3C”, value: ‘3C’},
{label:”3D”, value: ‘3D’},
{label:”4A”, value: ‘4A’},
{label:”4B”, value: ‘4B’},
{label:”4D”, value: ‘4D’},
{label:”Dialyse”, value: ‘Dialyse’},
{label:”Palli”, value: ‘Palli’},
{label:”KiZ 1″, value: ‘KiZ 1’},
{label:”KiZ 1c”, value: ‘KiZ 1c’},
{label:”KiZ 2″, value: ‘KiZ 2’},
{label:”KiZ 3″, value: ‘KiZ 3’},
];
// Create a jqxDropDownList
$(“#Station”).jqxDropDownList({ checkboxes: true, source: station, displayMember: “ContactName”, valueMember: “CompanyName”, width: 200, height: 25, theme: theme, scrollBarSize:13, promptText: “Waehlen Sie die Station aus” });
// bind to ‘select’ event.
$(“#Station”).bind(‘select’, function (event) {
var args = event.args;
var item = $(‘#Station’).jqxDropDownList(‘getItem’, args.index);
// get value
var st = item.value;});
});Name
VornameCan you tell, where my failure is? Thank You.
Liqu.
Hi Liquemin,
Could you provide the full code including the references to the javascript and CSS files and the HTML part? We will need it in order to see what’s wrong with the implementation. In addition, please format the code when you provide it by selecting it and pressing the
button in the Forum’s toolbar. I also notice that there’s a syntax error in the provided code. There’s an additional ‘,’ after: “{label:”KiZ 3″, value: ‘KiZ 3’},”.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
here is my complete code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title id='Description'>Eingabemaske der Resistenzen</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxmaskedinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="scripts/gettheme.js"></script> <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); $("#jqxSubmitButton").jqxButton({ width: '150', height: '25'}); $("#Erstnachweis").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme, formatString: "yyyy-MM-dd", showFooter: true, autoOpen: true}); //DropDownList Kliniken var klinik = [ {label:"MED1", value: 'MED1'}, {label:"MED2", value: 'MED2'}, {label:"MED1", value: 'MED3'}, {label:"VIS", value: 'VIS'}, {label:"GEF", value: 'GEF'}, {label:"GYN", value: 'GYN'}, {label:"GEBH", value: 'GEBH'}, {label:"PAED", value: 'PAED'}, {label:"AMBU", value: 'AMBU'}, ]; $("#Klinik").jqxDropDownList({ checkboxes: true, source: klinik, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme, scrollBarSize:13, promptText: "Waehlen Sie die Klinik aus" }); //DropDownList Stationen var station = [ {label:"SZNA", value: 'SZNA'}, {label:"1A", value: '1A'}, {label:"1C", value: '1C'}, {label:"1D", value: '1D'}, {label:"2A", value: '2A'}, {label:"2B", value: '2B'}, {label:"2C", value: '2C'}, {label:"2D", value: '2D'}, {label:"3A", value: '3A'}, {label:"3B", value: '3B'}, {label:"3C", value: '3C'}, {label:"3D", value: '3D'}, {label:"4A", value: '4A'}, {label:"4B", value: '4B'}, {label:"4D", value: '4D'}, {label:"Dialyse", value: 'Dialyse'}, {label:"Palli", value: 'Palli'}, {label:"KiZ 1", value: 'KiZ 1'}, {label:"KiZ 1c", value: 'KiZ 1c'}, {label:"KiZ 2", value: 'KiZ 2'}, {label:"KiZ 3", value: 'KiZ 3'}, ]; // Create a jqxDropDownList $("#Station").jqxDropDownList({ checkboxes: true, source: station, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme, scrollBarSize:13, promptText: "Waehlen Sie die Station aus" }); // bind to 'select' event. $("#Station").bind('select', function (event) { var args = event.args; var item = $('#Station').jqxDropDownList('getItem', args.index); // get value var st = item.value; }); }); </script></head> <body> <div id='jqxWidgets'> <form action ="input002.php" method = "POST"> <p><input name="na" class="jqx-input"/> Name</p> <p><input name="vn" class="jqx-input"/> Vorname</p> <div id='Erstnachweis' name="dt"></div> <div id="Klinik" name="kl" style='margin-top: 20px;'></div> <div id="Station" name="st" style='margin-top: 20px;'></div> <div> <input style='margin-top: 200px;' type="submit" name="Submit" id='jqxSubmitButton' /> </div> </form> </div> </body></html>
Thank you.
Hi Liquemin,
In the provided code, I noticed the following:
1. {label:”KiZ 3″, value: ‘KiZ 3’}, – The ‘,’ should be removed. The last item of arrays should be without ‘,’.
2. displayMember: “ContactName”, valueMember: “CompanyName” – should be removed. The data source of jqxDropDownList does not have such members.Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.