Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > Javascript Tips & Tricks : การใช้งาน JavaScript ร่วมกับ Form > JavaScript Dynamic Dependant DropDownList/ListMenu


JavaScript Dynamic Dependant DropDownList/ListMenu

JavaScript Dynamic Dependant DropDownList/ListMenu เป็นตัวอย่างการ JavaScript กับ Dependant หรือแสดงข้อมูลที่ม่ความส้มพันธ์กันด้วย DropDownList/ListMenu เช่น

Code
ยี้ห้อรุยนต์ -> รุ่น -> ปี



dependant_listmenu.html

view source
print?
001.<html>
002.<head>
003.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
004.<title>ThaiCreate.Com Tutorial</title>
005.<script language = "JavaScript">
006. 
007.        //**** List Model (Start) ***//
008.        function ListModel(SelectValue)
009.        {
010.            frmMain.ddlModel.length = 0
011.            frmMain.ddlYear.length = 0
012.             
013.            //*** Insert null Default Value ***//
014.            var myOption = new Option('','') 
015.            frmMain.ddlModel.options[frmMain.ddlModel.length]= myOption
016.                     
017.                x = "1"
018.                mySubList = new Array();
019.                 
020.                strGroup = "TOYOTA";
021.                strValue = "VIOS";
022.                strItem = "Vios";
023.                mySubList[x,0] = strItem;
024.                mySubList[x,1] = strGroup;
025.                mySubList[x,2] = strValue;
026.                if (mySubList[x,1] == SelectValue){
027.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
028.                    frmMain.ddlModel.options[frmMain.ddlModel.length]= myOption                
029.                }
030. 
031.                x = "2"
032.                mySubList = new Array();
033.                 
034.                strGroup = "TOYOTA";
035.                strValue = "ALTIS";
036.                strItem = "Altis";
037.                mySubList[x,0] = strItem;
038.                mySubList[x,1] = strGroup;
039.                mySubList[x,2] = strValue;
040.                if (mySubList[x,1] == SelectValue){
041.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
042.                    frmMain.ddlModel.options[frmMain.ddlModel.length]= myOption                
043.                }
044. 
045.                x = "3"
046.                mySubList = new Array();
047.                 
048.                strGroup = "HONDA";
049.                strValue = "CIVIC";
050.                strItem = "Civic";
051.                mySubList[x,0] = strItem;
052.                mySubList[x,1] = strGroup;
053.                mySubList[x,2] = strValue;
054.                if (mySubList[x,1] == SelectValue){
055.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
056.                    frmMain.ddlModel.options[frmMain.ddlModel.length]= myOption                
057.                }
058. 
059.                x = "4"
060.                mySubList = new Array();
061.                 
062.                strGroup = "HONDA";
063.                strValue = "CITY";
064.                strItem = "City";
065.                mySubList[x,0] = strItem;
066.                mySubList[x,1] = strGroup;
067.                mySubList[x,2] = strValue;
068.                if (mySubList[x,1] == SelectValue){
069.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
070.                    frmMain.ddlModel.options[frmMain.ddlModel.length]= myOption                
071.                }
072.                                                                     
073.        }
074.        //**** List Model (End) ***//
075. 
076.         
077.        //**** List Year (Start) ***//
078.        function ListYear(SelectValue)
079.        {
080.            frmMain.ddlYear.length = 0
081. 
082.            //*** Insert null Default Value ***//
083.            var myOption = new Option('','') 
084.            frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption
085. 
086.                x = "1";
087.                mySubList = new Array();
088.                 
089.                strGroup = "VIOS";
090.                strValue = "2003";
091.                strItem = "2003";
092.                mySubList[x,0] = strItem;
093.                mySubList[x,1] = strGroup;
094.                mySubList[x,2] = strValue;
095.                             
096.                if (mySubList[x,1] == SelectValue){
097.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
098.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
099.                }
100. 
101.                x = "2";
102.                mySubList = new Array();
103.                 
104.                strGroup = "VIOS";
105.                strValue = "2006";
106.                strItem = "2006";
107.                mySubList[x,0] = strItem;
108.                mySubList[x,1] = strGroup;
109.                mySubList[x,2] = strValue;
110.                             
111.                if (mySubList[x,1] == SelectValue){
112.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
113.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
114.                }
115. 
116.                x = "3";
117.                mySubList = new Array();
118.                 
119.                strGroup = "VIOS";
120.                strValue = "2007";
121.                strItem = "2007";
122.                mySubList[x,0] = strItem;
123.                mySubList[x,1] = strGroup;
124.                mySubList[x,2] = strValue;
125.                             
126.                if (mySubList[x,1] == SelectValue){
127.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
128.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
129.                }
130. 
131.                x = "4";
132.                mySubList = new Array();
133.                 
134.                strGroup = "ALTIS";
135.                strValue = "2002";
136.                strItem = "2002";
137.                mySubList[x,0] = strItem;
138.                mySubList[x,1] = strGroup;
139.                mySubList[x,2] = strValue;
140.                             
141.                if (mySubList[x,1] == SelectValue){
142.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
143.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
144.                }
145. 
146.                x = "5";
147.                mySubList = new Array();
148.                 
149.                strGroup = "ALTIS";
150.                strValue = "2004";
151.                strItem = "2004";
152.                mySubList[x,0] = strItem;
153.                mySubList[x,1] = strGroup;
154.                mySubList[x,2] = strValue;
155.                             
156.                if (mySubList[x,1] == SelectValue){
157.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
158.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
159.                }
160. 
161.                x = "6";
162.                mySubList = new Array();
163.                 
164.                strGroup = "ALTIS";
165.                strValue = "2009";
166.                strItem = "2009";
167.                mySubList[x,0] = strItem;
168.                mySubList[x,1] = strGroup;
169.                mySubList[x,2] = strValue;
170.                             
171.                if (mySubList[x,1] == SelectValue){
172.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
173.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
174.                }
175. 
176.                x = "7";
177.                mySubList = new Array();
178.                 
179.                strGroup = "CIVIC";
180.                strValue = "2001";
181.                strItem = "2001";
182.                mySubList[x,0] = strItem;
183.                mySubList[x,1] = strGroup;
184.                mySubList[x,2] = strValue;
185.                             
186.                if (mySubList[x,1] == SelectValue){
187.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
188.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
189.                }
190. 
191.                x = "8";
192.                mySubList = new Array();
193.                 
194.                strGroup = "CIVIC";
195.                strValue = "2003";
196.                strItem = "2003";
197.                mySubList[x,0] = strItem;
198.                mySubList[x,1] = strGroup;
199.                mySubList[x,2] = strValue;
200.                             
201.                if (mySubList[x,1] == SelectValue){
202.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
203.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
204.                }
205. 
206.                x = "9";
207.                mySubList = new Array();
208.                 
209.                strGroup = "CIVIC";
210.                strValue = "2011";
211.                strItem = "2011";
212.                mySubList[x,0] = strItem;
213.                mySubList[x,1] = strGroup;
214.                mySubList[x,2] = strValue;
215.                             
216.                if (mySubList[x,1] == SelectValue){
217.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
218.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
219.                }
220. 
221.                x = "10";
222.                mySubList = new Array();
223.                 
224.                strGroup = "CITY";
225.                strValue = "2000";
226.                strItem = "2000";
227.                mySubList[x,0] = strItem;
228.                mySubList[x,1] = strGroup;
229.                mySubList[x,2] = strValue;
230.                             
231.                if (mySubList[x,1] == SelectValue){
232.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
233.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
234.                }
235. 
236.                x = "11";
237.                mySubList = new Array();
238.                 
239.                strGroup = "CITY";
240.                strValue = "2005";
241.                strItem = "2005";
242.                mySubList[x,0] = strItem;
243.                mySubList[x,1] = strGroup;
244.                mySubList[x,2] = strValue;
245.                             
246.                if (mySubList[x,1] == SelectValue){
247.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
248.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
249.                }
250. 
251.                x = "12";
252.                mySubList = new Array();
253.                 
254.                strGroup = "CITY";
255.                strValue = "2009";
256.                strItem = "2009";
257.                mySubList[x,0] = strItem;
258.                mySubList[x,1] = strGroup;
259.                mySubList[x,2] = strValue;
260.                             
261.                if (mySubList[x,1] == SelectValue){
262.                    var myOption = new Option(mySubList[x,0], mySubList[x,2]) 
263.                    frmMain.ddlYear.options[frmMain.ddlYear.length]= myOption                  
264.                }
265.                                                             
266.        }
267.        //**** List Year (End) ***//
268. 
269.</script>
270. 
271.</head>
272.<form name="frmMain" action="" method="post">
273.    Brand
274.    <select id="ddlGeo" name="ddlGeo" onChange = "ListModel(this.value)">
275.    <option selected value=""></option>
276.    <option value="TOYOTA">TOYOTA</option>
277.    <option value="HONDA">HONDA</option>
278.    </select>
279. 
280.    Model
281.    <select id="ddlModel" name="ddlModel" style="width:100px" onChange = "ListYear(this.value)"></select>
282. 
283.    Year
284.    <select id="ddlYear" name="ddlYear" style="width:100px"></select>
285.</form>
286.</body>
287.</html>

Screenshot

JavaScript Dynamic Dependant DropDownList/ListMenu

สำหรับการใช้งานร่วมกับ php+mysql

Go to : สร้าง Dependent ListMenu เลือกข้อมูลหลักและข้อมูลย่อยเปลี่ยนตามหัวข้อหลัก
Go to : Dependent DropDownList/ListMenu จังหวัด อำเภอ ตำบล USING JSON
   
Hate it
Don't like it
It's ok
Like it
Love it
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท

ลองใช้ค้นหาข้อมูล
   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2011-06-19 08:22:36 / 2011-06-19 08:27:18
  Download : No files
 Sponsored Links / Related

 
JavaScript Submit & Button
Rating :

 
JavaScript alert & confirm
Rating :

 
JavaScript HTML Submit Form
Rating :

 
JavaScript Keyboard & Event
Rating :

 
JavaScript HTML Multiple Action Form
Rating :

 
JavaScript innerHTML & InnerText
Rating :

 
JavaScript HTML Check Input TextBox/Text Field
Rating :

 
JavaScript Check Password / Confirm Password
Rating :

 
JavaScript HTML Check Checkbox
Rating :

 
JavaScript HTML Check Radio Button
Rating :

 
JavaScript HTML Back/Next/Close/Print
Rating :

 
JavaScript HTML Disable & Enable Html Element
Rating :

 
JavaScript HTML Show/Hide Html Element
Rating :

 
JavaScript Auto Print Preview
Rating :

 
JavaScript Reload/Refresh Webpage
Rating :

 
JavaScript Auto Redirect
Rating :

 
JavaScript Timers Delay setTimeout
Rating :

 
HTML Redirect / Refresh Webpage
Rating :

 
JavaScript Click Check All and Un Check All
Rating :

 
JavaScript & AJAX
Rating :

 
JavaScript Cookies
Rating :

 
JavaScript Prompt
Rating :

 
JavaScript Disabled Element
Rating :

 
JavaScript Display Element
Rating :

 
JavaScript Visibility & Display
Rating :

 
JavaScript Check Validate Number only input
Rating :

 
JavaScript Check Event Key Codes / Keyboard
Rating :

 
JavaScript Disable Enter Submit Form
Rating :

 
JavaScript Disable IE (Internet Explorer) Close Button.
Rating :

 
JavaScript Print Webpage and Using CSS
Rating :

 
JavaScript Sum Total Value From Textbox
Rating :

 
JavaScript Change Display Image from JavaScript
Rating :

 
JavaScript/jQuery Display Preview Images Before Upload
Rating :

 
JavaScript Add/Remove Item in ListMenu/DropDownList
Rating :

 
JavaScript substring
Rating :

 
JavaScript split
Rating :

 
JavaScript trim
Rating :

 
JavaScript Count String Length
Rating :

 
JavaScript Change Textbox Stylesheet / CSS
Rating :

 
JavaScript Get/Read all element on Webpage
Rating :

 
JavaScript Popup Window
Rating :

 
JavaScript Display Full Screen WebPage
Rating :

 
Javascript Enter and AutoFocus Next Textbox (Up and Down Keyword)
Rating :

 
JavaScript Disable Right-Click
Rating :

 
JavaScript Disable Text Selection on Webpage When Drag-and-Drop
Rating :

 
JavaScript Auto Select Text When Click TextBox
Rating :

 
JavaScript Auto Clear Text When Click TextBox
Rating :

 
JavaScript Create Cookies , Read Cookies , Delete Cookies
Rating :

 
JavaScript createElement or element control
Rating :

 
JavaScript Get a Screen Resolution Detection
Rating :

 
JavaScript: Check File Extension Before Upload
Rating :

 
JavaScript createElement Without Array
Rating :

 
JavaScript createElement and Create DropDownList/ListMenu
Rating :

 
JavaScript createElement Select and Get item from MySql Database
Rating :

 
JavaScript Change Display Image When MouseOver
Rating :

 
JavaScript Dependency Dependant and MySQL Database
Rating :

 
JavaScript Click Checkbox and Highlight Background Color table
Rating :

 
JavaScript Mark all the Checkbox and Background Color the Table After Checked Checkbox
Rating :

 
JavaScript When Cell Click Highlight BackGround Color , BgColor in a Table
Rating :

 
Javascript Table Cell Highlight Background Colors Change on Mouseover
Rating :

 
JavaScript Get element with array
Rating :

 
JavaScript Send Data from Popup to Main form
Rating :

 
JavaScript Send Checkbox Data from Popup to Main form
Rating :

 
JavaScript isNaN() Check Number
Rating :

 
JavaScript ParseFloat() Convert String to Number
Rating :

 
JavaScript ParseInt() Convert String to Integer
Rating :

 
JavaScript Ceil() Round fractions up
Rating :

 
JavaScript toFixed() Formatting numbers for currency
Rating :

 
JavaScript toExponential() Converts to exponential notation.
Rating :

 
JavaScript toPrecision() Formats Specified length
Rating :

 
JavaScript valueOf()
Rating :

 
JavaScript toUpperCase() Convert Uppercase String
Rating :

 
JavaScript toLowerCase() Convert Lower String
Rating :

 
JavaScript substr() Sub String
Rating :

 
JavaScript toString() Convert to String
Rating :

 
JavaScript Number Format and Comma
Rating :

 
JavaScript replace() Replace string
Rating :

 
JavaScript random() Random number
Rating :

 
JavaScript round() Round Nearest integer
Rating :

 
JavaScript DateAdd() AddDay , AddMonth , AddYear
Rating :

 
JavaScript DateDiff() Calculating the difference date time
Rating :

 
JavaScript TimeDiff() Calculating the difference time
Rating :

 
JavaScript MonthDiff() Calculating the difference month from two date time
Rating :

 
JavaScript Compare DateTime to compare difference
Rating :

 
JavaScript Date() Day , Month , Year , Second , Minutes , Hours
Rating :

 
JavaScript Get Selection Text from DropDownList/ListMenu
Rating :

 
JavaScript Check and Detection Web Browser
Rating :

 
Javascript Disable Backspace on KeyPress
Rating :

 
Javascript Disable Enter Submit and Backspace on KeyPress
Rating :

 
JavaScript Creating Add to Favorites Button
Rating :

 
JavaScript Show and Hide Table Rows
Rating :

 
JavaScript Create/Remove/Delete Dynamic Table Rows
Rating :

 
JavaScript setTimeOut & Loop
Rating :

 
JavaScript Text Box Characters Counter
Rating :

 
JavaScript Fixed Size and Get Size in HTML Element
Rating :

 
JavaScript Redirect/Redirection Web Page
Rating :

 
JavaScript get offsetWidth and offsetHeight
Rating :

 
JavaScript Input type file: Changing browse button
Rating :

 
JavaScript Move Maximize Window From JavaScript
Rating :

 
JavaScript visibility hidden & visible
Rating :

 
CSS Page Break on Printing
Rating :


ThaiCreate.Com Forum
Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   





ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่