Question

我有如下代码，该代码给我两个选择选项，当我在类kota_kabupaten上选择值时如何更改类kecamatan上的选择值，

例如：当我选择＆＃34; tangerang＆＃34;在第一个选择选项（类kota_kabupaten）然后在第二个选择（类kecamatan）中，值将是＆＃34; balaraja＆＃34;和＆＃34; bitung＆＃34;没有＆＃34; balong＆＃34;在那里。

感谢您的帮助：D

javascript

<script type="text/javascript">
   $(document).ready(function(){
      $(".kota_kabupaten").change(function(){                   
      var kab = $(".kota_kabupaten option:selected").val();
      //do something here
   });
  });
</script>

HTML / PHP的

<select class="form-control kota_kabupaten">
  <?php
     $kab = array(
     'tangerang'=>array('balajara','bitung'),
     'banten' => array('balong')
      );
     foreach ($kab as $kab => $kecamatan){
     echo "<option value=".$kab.">".$kab."</option>" ;
      }
?>
</select>
<select class="form-control kecamatan" name = "kecamatan" id="kecamatan">
    <?php
     $kab = array(
        'tangerang'=>array('balajara','bitung'),
        'banten' => array('balong')
        );
        $kabupaten="tangerang"; // this line just for example when the value is exist
      foreach ($kab as $kab => $kecamatan){
        if(is_array($kecamatan)){
          foreach ($kecamatan as $key => $value) {
            if($kab==$kabupaten){
            echo "<option value=".$value.">".$value."</option>" ;
            }
          }
        }  
      }
    ?>
  </select>

Answer 1

为什么你不能使用Ajax？ PHP / Jquery（Ajax）。如果需要，示例工作代码在这里。

http://phpfiddle.org/main/code/uhrz-pnfe

PHP / JQUERY - AJAX

<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $(".kota_kabupaten").change(function(){  
        //alert('here');

        var parent_selected_value = $(this).val();
        alert("You have selected : "+parent_selected_value);


        $.ajax({
            type: "POST",
            url: "../ajax/ajax.php",
            data: "selected_value="+parent_selected_value+"&type=dependent_dropdown", //you can POST multiple parameters
            //data: ({name: value, email:value, phone: value}),
            success: function(data){
                alert(data);
                $("#kecamatan").html('');
                $("#kecamatan").html(data);
            }
        });        
    });
});
</script>
</head>
<body>

    <select class="form-control kota_kabupaten">
  <?php
     $kab = array(
         'tangerang'=>array('balajara','bitung'),
         'banten' => array('balong')
      );

echo "<option value=''>--Please Select--</option>" ;
     foreach ($kab as $kab => $kecamatan){
       echo "<option value=".$kab.">".$kab."</option>" ;
     }
?>
</select>

<select class="form-control kecamatan" name = "kecamatan" id="kecamatan">
   <option value=''>--Please Select--</option>
  </select>
</body>
</html>

AJAX.PHP

<?php
    if(isset($_REQUEST['type']))
    {
        $type=$_REQUEST['type'];
        switch($type)
        {
            case "dependent_dropdown":
                $kab = array(
                    'tangerang'=>array('balajara','bitung'),
                    'banten' => array('balong')
                );

            $child_array = $kab[$_REQUEST['selected_value']];
            echo "<option value=''>--Please Select--</option>" ;
            foreach ($child_array as $kab){
                echo "<option value=".$kab.">".$kab."</option>" ;
            }

            break;



            default:
                echo "ERROR, some problem in ajax type";
            break;
        }


    }
    else
    {   
        echo "ERROR, some problem in ajax";
    }
?>

Answer 2

我相信这很好。

<script type="text/javascript">
  $(document).ready(function(){
    $(".kota_kabupaten").change(function(){                   
    var kabSel = $(this).val(); // CHANGE THIS LINE
    values=kab[kabSel];
    opt="";
    for(i in values){
      opt+="<option value='"+values[i]+"' >"+values[i]+"</option>";
    }
   $("#kecamatan").html(opt);
  });
  });
 </script>

PHP

 <select class="form-control kota_kabupaten">
  <?php
     $kab = array(
     'tangerang'=>array('balajara','bitung'),
     'banten' => array('balong')
      );
     foreach ($kab as $kab => $kecamatan){
     echo "<option value=".$kab.">".$kab."</option>" ;
      }
?>
</select>
 <script>
 $(document).ready(function(){
  kab=<?php echo json_encode($kab); ?>
 });
 </script>
<select class="form-control kecamatan" name = "kecamatan" id="kecamatan">

</select>

使用jquery更改select上的其他选择值

2 个答案: