0

3 つのドロップダウンがあります。最初のドロップダウンで選択したオプションに基づいて、javascript を使用して 2 番目のドロップダウンにデータを入力しています。

最初のドロップダウン

<select id="continent" onchange="secondMenu(this,'country')" >
<option value="1">Asia</option>
<option value="2">Europe</option
</select>

2 番目のドロップダウン

<select id="country" >
</select>

3 番目のドロップダウン

<select id="population" >
</select>

私のスクリプト

<script>
       function secondMenu(ddl1,ddl2){
  var as=new Array('Japan','China');
  var eu=new Array('Germany','France');
 switch (ddl1.value) {
        case 1:
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < as.length; i++) {
                createOption(document.getElementById(ddl2), as[i], as[i]);
            }
            break;
        case 2:
            document.getElementById(ddl2).options.length = 0; 
        for (i = 0; i < eu.length; i++) {
            createOption(document.getElementById(ddl2), eu[i], eu[i]);
            }
            break;

   }
     function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
    }
</script>

2 番目のドロップダウンで選択したオプションに基づいて、mysql クエリを実行し、3 番目のドロップダウンに入力します。3 番目のドロップダウンに入力する方法についてのヘルプ。

4

2 に答える 2

1

Ajax を使用します。私は自分のプロジェクトの 1 つで非常に似たようなことを行っているので、例を次に示します。

$('#product_series_text', $('#product_form')).change(function() {
  var $series = $(this).val();
  // Ajax request to get an updated list of product models
  $.getJSON(
    "<?php echo url::site('product/get_model_like_series'); ?>", 
    { series: $series },
    function(data) {
      $("#product_model", 
        $('#product_form')).form_utils('replaceOptions', data);
    });
});

そこには多くのjQueryがありますが、アイデアは、1つのドロップダウンで変更のイベントリスナーを用意し、次にAjaxクエリを開始して（データベースをポーリングし、結果のJsonリストを送信します）、ドロップダウンリストを作成しますus (ドロップダウン リストが既に存在するため、オプションのみが変更されます)

于 2013-03-06T10:42:30.107 に答える
1

AJAX を使用してサーバーにリクエストを送信し、mysql クエリを実行します。JQuery を使用していないと仮定すると、純粋な AJAX は次のようになります。

if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
            var data = xmlhttp.responseText;
            //populating your select
         }
      }
      xmlhttp.open("GET", "yourmethodpath", true);
      xmlhttp.send();
    }
于 2013-03-06T10:42:41.480 に答える