javascript and PHP variable passing

Question

I have two select box and the second select box value is dependent on the first select box. So basically what I am trying to do is that after a user makes a selection on the first select box, it will then store this value of the first select box as a variable. Then it will query my database to populate the second select box, based on the first selected value. Question is, how do I pass in the var I have in the first select box to PHP? I've read other post and people said it's impossible, but if it is then how do people do this? AJAX?

Answer 1

如果我理解正确，那么是的，使用AJAX实际上是您的唯一选择。

Answer 2

Indeed, you can, with AJAX, call something like 'getSelectionData.php?data=' + select1.value, which returns a JSON array of data based on the selection in the first select box. You then parse the data and enter it into the second select box.

Answer 3

Add a onchange event listener to the first select box:

document.getElementById("select1").addEventListener("change", function(ev){
   var yourstoredvariable = this.value;
   someFunctionThatCallsAjax(yourstoredvariable);
}, true);

Answer 4

您将在第一个<select>上发生一个onchange事件，该事件将使用Ajax查询具有选定<option>值的服务器，该值将返回<option>元素，并使用该元素填充第二个<select>元素。

Answer 5

Question is, how do I pass in the var I have in the first select box to PHP?

I see no problem here.
Just usual, an ordinary html form using GET method.
What's so big about it?

Answer 6

If I see correct you're using Jquery. So you can do this like this:

$('#idOfSelectBox1').change(function(){
jQuery.ajax({
    type: "GET",
    url:"yourdomain.com/script.php",
    data:"selectBox:'"+$('#idOfSelectBox1').val()+"'",
    success:function(result){
        //do smth with the returned data
    }
});
});

in the script.php do your magic and echo what you want to pass back to js

Answer 7

I assume that you have a Country/City dropdowns, You can do it in two ways, the good AJAX way and the bad way (refresh page on change), I'm gonna describe the good way in jQuery, or at least what I see it good.

this is the client-side (ie client) code:

<select id="country">
  <option value="1">Canada</option>
  <option value="2">UK</option>
</select>
<select id="city" disabled="disabled"></select>
<script type="text/javascript">
  $('#country').change(function(){
      $('#city').load('/ajax-city.php', {id: $(this).val()});
  });
</script>

This is the ajax-city.php code (server):

<?php
$countryId = $_REQUEST['id'];
$cities = array(); // Get it from db, using mysql_query or anything you want to use
foreach($cities as $city) {
  echo "<option id=\"{$city['id']}\">{$city['name']}</option>";
}

PS. you would need to include jQuery in your html code, and of course put the two files in the same directory (or change the $.load path).

This particular code is not tested, I've just written it. But it usually works fine to me this way.