Veritabanından gelen javascript değerlerini kullanarak 1'e göre 2. açılır menü değerlerini değiştirme

Question

Değerler veritabanını iki düşüşle elde etmeye çalışıyorum, 1. açılan listeden herhangi bir seçeneği seçersem 2. açılan aşağıya veritabanı değerleriyle doldurulur. Bu alana bağlı ve şu ana kadar bunu yaptım. veritabanı değerlerinden, veritabanı değerlerinden nasıl yararlanacağımı nereden belirtmeliyim. Temelde başından için lütfen üzerinde değiştiğinde olay kullanımıyla ilgiliyse

<label> List of Tables : </label><br> 
<form name="myform" id="myForm"> 
    <select name="optone" id="jobSelect" size="1"> 
     <option value="" selected="selected">Select job</option> 
    </select> 
    <br> 
    <br> 
    <select name="opttwo" id="attrSelect" size="1"> 
     <option value="" selected="selected">Select attribute</option> 
    </select> 
</form> 

<script> // AJAX Implementation 
function showJobs() { 
    str = document.getElementById("jobs").value; 
    str1 = document.getElementById("attributes").value; 
    if (str == "" || str1 == "") { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } 
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET", "listCourseByAjax.php?p=" + str + "&q=" + str1, true);// **DONOT KNOW WHAT TO DO HERE AS I am not using php I m using java** 
    xmlhttp.send(); 
} 
</script> 

Answer 1

, DEMO bkz kod detay Başvuru için seçme elemanı

hem benzersiz kimliği ekleyin.

HTML

<form name="myform" id="myForm"> 
    <select name="optone" id="stateSel" size="1"> 
     <option value="" selected="selected">Select state</option> 
    </select> 
    <br> 
    <br> 
    <select name="opttwo" id="countySel" size="1"> 
     <option value="" selected="selected">Please select state first</option> 
    </select> 
    <br> 
    <br> 
    <select name="optthree" id="citySel" size="1"> 
     <option value="" selected="selected">Please select county first</option> 
    </select> 
</form> 
<hr/> 
<a href="http://jsfiddle.net/mplungjan/mfuusp9p/" target="_blank">Version 2 has autoselect of single options</a> 

JS

var stateObject = { 
    "California": { 
     "Monterey": ["Salinas", "Gonzales"], 
     "Alameda": ["Oakland", "Berkeley"] 
    }, 
    "Oregon": { 
     "Douglas": ["Roseburg", "Winston"], 
     "Jackson": ["Medford", "Jacksonville"] 
    } 
} 
window.onload = function() { 
    var stateSel = document.getElementById("stateSel"), 
     countySel = document.getElementById("countySel"), 
     citySel = document.getElementById("citySel"); 
    for (var state in stateObject) { 
     stateSel.options[stateSel.options.length] = new Option(state, state); 
    } 
    stateSel.onchange = function() { 
     countySel.length = 1; // remove all options bar first 
     citySel.length = 1; // remove all options bar first 
     if (this.selectedIndex < 1) return; // done 
     for (var county in stateObject[this.value]) { 
      countySel.options[countySel.options.length] = new Option(county, county); 
     } 
    } 
    stateSel.onchange(); // reset in case page is reloaded 
    countySel.onchange = function() { 
     citySel.length = 1; // remove all options bar first 
     if (this.selectedIndex < 1) return; // done 
     var cities = stateObject[stateSel.value][this.value]; 
     for (var i = 0; i < cities.length; i++) { 
      citySel.options[citySel.options.length] = new Option(cities[i], cities[i]); 
     } 
    } 
}