duanguoping2016 2014-09-01 11:45
浏览 104
已采纳

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

I have code like below, that code give me two select option , how to change select value on class kecamatan when I select value on class kota_kabupaten,

for example : when I select "tangerang" in first select option(class kota_kabupaten) and then in the second select(class kecamatan) the values will be "balaraja" and "bitung" without "balong" in there.

thanks before for your help :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>
  • 写回答

2条回答 默认 最新

  • dongshuo8756 2014-09-01 13:52
    关注

    Why cant you use Ajax for the same? PHP / Jquery(Ajax). The sample working code is here, if you want.

    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";
    }
?>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候，驱动要重新装才能使用，怎么解决？
  • ¥15 让node服务器有自动加载文件的功能