Çalışmam asp ve access veritabanı kullanıyorum.
Sorum:
İl, İlçe ve Oteller diye alt alta 3 farklı açılır formum var.
Örneğin ziyaretçi İl seçeneğinden Antalya'yı seçtiğinde, İlçe formunda Antalya İline ait ilçeler sıralanmasını istiyorum. aynı şekilde İlçe formunda seçilen ilçe'ye göre o ilçeye ait otellerin açılır formda sıralansın. Bununla ilgili bir çok javascript bulup baktım ama hiç biri ihtiyacıma cevap veremedi.
Elimde bir Jscript var ve sadece iki açılır form için tasarlanmış. Bunu 3 adet açılır form için uyarlayabilirmisiniz. En azından bu scripte asp kodlarımı entegre edebilirim.
Javascript Kodu :
Kod: Tümünü seç
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Yeni Sayfa 1</title>
</head>
<body>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Bobby van der Sluis | http://www.bobbyvandersluis.com/ */
// Details can be found at:
// http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
function dynamicSelect(id1, id2) {
// Feature test to see if there is enough W3C DOM support
if (document.getElementById && document.getElementsByTagName) {
// Obtain references to both select boxes
var sel1 = document.getElementById(id1);
var sel2 = document.getElementById(id2);
// Clone the dynamic select box
var clone = sel2.cloneNode(true);
// Obtain references to all cloned options
var clonedOptions = clone.getElementsByTagName("option");
// Onload init: call a generic function to display the related options in the dynamic select box
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
sel1.onchange = function() {
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
};
}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
// Delete all options of the dynamic select box
while (sel2.options.length) {
sel2.remove(0);
}
// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
var pattern1 = /( |^)(select)( |$)/;
var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
// Iterate through all cloned options
for (var i = 0; i < clonedOptions.length; i++) {
// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
// Clone the option from the hidden option pool and append it to the dynamic select box
sel2.appendChild(clonedOptions[i].cloneNode(true));
}
}
}
// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
dynamicSelect("il", "ilce");
});
</script>
<form>
<div>
<select name="il">
<option value="select">İl Seçiniz</option>
<option value="diyarbakır">Diyarbakır</option>
<option value="antalya">Antalya</option>
<option value="istanbul">İstanbul</option>
</select>
<select name="ilce">
<option class="select" value="select">İlçe Seçiniz</option>
<option class="diyarbakır" value="Diyarbakır1">Diyarbakır1</option>
<option class="diyarbakır" value="Diyarbakır2">Diyarbakır2</option>
<option class="diyarbakır" value="Diyarbakır3">Diyarbakır3</option>
<option class="antalya" value="Antalya1">Antalya1</option>
<option class="antalya" value="Antalya2">Antalya2</option>
<option class="istanbul" value="İstanbul1">İstanbul1</option>
<option class="istanbul" value="İstanbul2">İstanbul2</option>
<option class="istanbul" value="İstanbul3">İstanbul3</option>
</select>
</div>
</form></body>
</html>