简体   繁体   中英

how to get value from dependant drop down list to javascript and parsing it to another php page?

I make a 2 level dependant drop down list and that work fine, but I don't know how to get the 2nd level value with javascript..here is the code I'm using..

dropdownlist.html:

<script type="text/javascript" src="../js/dropdown_list.js"></script>
<select class="level" id="level1" onChange="get_level2(this.value)">
    <option selected="selected" value="0">--Choose One--</option>

<?php
$sql_get = mysql_query ("SELECT * FROM ajax_table WHERE pid=0");

    while($row_get = mysql_fetch_array($sql_get))
    {
        echo "<option value='".$row_get['id']."'>".$row_get['category']."</option>";
    }
    ?>
    </select>

    <span id="level2"></span>

since the dependant work just fine..so I think I can skip the get_level2 () function and another php file to process the 2nd level drop down..

and here is the code where I try to get the value from drop down list when button click..

dropdown_list.js :

function cekForm() {
//the getValue1 work fine but I can't make getValue2 work..
//how to get value from 2nd level drop down list with getValue2??

var value1 = document.getElementById("level1");
var getValue1 = value1.options[value1.selectedIndex].value;
var value2 = document.getElementById("level2");
var getValue2 = value2.options[value2.selectedIndex].value;
if (getValue1 == 0){
alert("Please Choose One");
}
if (getValue1 != 0){
//where I want to pass the dropdown value to post_value.php
window.location= "post_value.php";
}
}

How to get the value of 2nd level drop down list??and how to pass the value to post_value.php??

please help me...

Update :

Here is the code from firefox view page source:

//this is <head> part
  <link href="../css/val.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../js/dropdown_list.js"></script>
//end of </head>

//<body> part
<div class="form-div">
    <form id="form_level" name="form_level" style="padding-top:0px;">
    <div class="form-row" style="padding-top:0px;">
    <h3>Choose Drop Down :</h3>
    <select class="level" id="level1" onChange="get_level2(this.value)" style="position:relative; top:-40px; left:150px;">
    <option selected="selected" value="0">--Choose One--</option>
    <option value='1'>BAA</option><option value='2'>BAK</option><option value='3'>BAUK</option></select>

    <span id="level2"></span>
    </div>


      <div class="form-row" style="position:relative; top:100px; left:305px;">
      <input class="submit" value="Send" type="button" onClick="cekForm()">
      </div>
      <br /><br />
    </form>
</div>

Pass value using get method through url

<script>
function cekForm() {

    var getValue1 = document.getElementById("level1").value;
    var getValue2 = document.getElementById("level2").getElementsByTagName("select")[0].value;

    if (getValue1.length==0){
        alert("Please Choose One");
        return;
    }
    if (getValue1.length>0){
        window.location= "post_value.php?level1="+getValue1+"&level2="+getValue2;
    }
}
</script>

and receive it in php file

post_value.php

<?php

$level1 = $_GET["level1"];
$level2 = $_GET["level2"];

?>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM