javascript、php、onchange 选择框不起作用

Question

我有一个带有两个选择框的表单，我希望无需按提交按钮即可实时更改这些框。

这是我使用的代码:

    <script>

   $( document ).ready(function() {

       $('#provincie').live('change', function(event){
    if($(this).val() == '#provincie'){
        $("#result_div").empty()
    }else{
          var values = $(this).closest('form').serialize();
        $.ajax({
            url: "toevoegen.php",
            data: values,
            success: function(data){
                $("#result_div").empty().append(data);
            },
            error:function(){
                $("#result_div").empty().append('something went wrong');
            }
        });
    }
   });
});
</script>


<?php
    $select =
    "SELECT
            provincie
        FROM
            plaatsen
        GROUP BY
            provincie
        ";

$exec = mysql_query($select) or die ('Ojee, foutieve query!: '.mysql_error());

echo '<form id="provincies" method="post">';
    echo "<select id='provincie' name = 'provincie' onchange=\"this.form.submit()\">";                                          
    echo "<option value=''>Kies provincie</option>";

   while ($provincie = mysql_fetch_assoc($exec)) {
                echo '<option value="'.$provincie['provincie'].'">'.$provincie['provincie'].'</option>';

            }
      echo "</select>";
      $provincies = $_POST['provincie'];
    ?>
    </select>
    <div id="result_div">
    Gekozen provincie: <?php echo $provincies; ?><br />
    </div>


<?php

   if(isset($_POST['provincie'])){
      $plaats_query =

        "SELECT
            *
        FROM
            plaatsen
        WHERE
            provincie = '".$_POST['provincie']."'
        GROUP BY
            plaats
        ORDER BY
            plaats ASC
            ";

        $plaats_result = mysql_query($plaats_query) or die ("FOUT: " . mysql_error());

        echo "<select id='plaatsnaam' name = 'plaatsnaam'>";
        echo "<option value=''>Kies plaatsnaam</option>";

        while($plaats = mysql_fetch_assoc($plaats_result))

          {
          echo "<option value='" . $plaats['stadid'] . "'>" . $plaats['plaats'] . "</option>";
          }
          echo "</select>";
}
$plaatsje_query =

        "SELECT
            *
        FROM
            plaatsen
        WHERE
            stadid = '".$_POST['plaatsnaam']."'
        GROUP BY
            plaats
        ORDER BY
            plaats ASC
            ";

        $plaatsje_result = mysql_query($plaatsje_query) or die ("FOUT: " . mysql_error());
        while($plaatsje = mysql_fetch_assoc($plaatsje_result))

$woonplaats = $plaatsje['plaats'];
$regiotje = $plaatsje['regio'];

$plaatsjes_query =

        "SELECT
            *
        FROM
            plaatsen
        WHERE
            stadid = '".$_POST['plaatsnaam']."'
        GROUP BY
            regio
        ORDER BY
            regio ASC
            ";

        $plaatsjes_result = mysql_query($plaatsjes_query) or die ("FOUT: " . mysql_error());
        while($plaatsjes = mysql_fetch_assoc($plaatsjes_result))

$regiotje = $plaatsjes['regio'];

?>
<br />

          <label for="categorie">Categorie selecteren *</label>
          <select id="categorie" name="categorie">
            <option value="">Selecteer de categorie</option>
            <?php
            while ($categorie = mysql_fetch_assoc($catexec)) {
                echo '<option value="'.$categorie['catid'].'">'.$categorie['catname'].'</option>';
            }
            ?>
          </select>
          <script type="text/javascript">
                var categorie = new LiveValidation('categorie');
                categorie.add( Validate.Presence );
            </script>
          <br class="clear" />

<fieldset>
          <label for="bedrijf">Naam bedrijf *</label>
          <input id="bedrijf" name="bedrijf" class="text" />
          <script type="text/javascript">
                    var bedrijf = new LiveValidation('bedrijf');
                    bedrijf.add(Validate.Presence);
                  </script>
                  <br class="clear" />
          <label for="contactpersoon">Contactpersoon</label>
          <input id="contactpersoon" name="contactpersoon" class="text" />
          <br class="clear" />
          <label for="email">E-mailadres</label>
          <input id="email" name="email" class="text" />
          <script type="text/javascript">
                    var email = new LiveValidation('email');
                    email.add(Validate.Email );
                  </script>
          <br class="clear" />
          <label for="website">Website</label>
          <input id="website" name="website" class="text" />
          <br class="clear" />
          <label for="telefoon">Telefoonnummer *</label>
          <input id="telefoon" name="telefoon" class="text" />
          <script type="text/javascript">
                var telefoon = new LiveValidation('telefoon');
                telefoon.add( Validate.Presence );
            </script>
          <br class="clear" />
          <label for="fax">Fax</label>
          <input id="fax" name="fax" class="text" />
          <br class="clear" />
          <label for="straat">Straat *</label>
          <input id="straat" name="straat" class="text" />
          <script type="text/javascript">
                var straat = new LiveValidation('straat');
                straat.add( Validate.Presence );
            </script>
          <br class="clear" />
          <label for="postcode">Postcode *</label>
          <input id="postcode" name="postcode" class="text" />
          <script type="text/javascript">
                var postcode = new LiveValidation('postcode');
                postcode.add( Validate.Presence );
            </script>
          <br class="clear" />
          <input type="hidden" name="transno" id="transno" value="<?php echo $n; ?>" />
          <br class="clear" />
          <label for="kvk"><abbr title="Kamer van Koophandel Nummer" lang="NL">KvK</abbr> nummer *</label>
          <input id="kvk" name="kvk" class="text" />
          <script type="text/javascript">
                var kvk = new LiveValidation('kvk');
                kvk.add( Validate.Presence );
                kvk.add( Validate.Numericality );
            </script>
          <br class="clear" />
          <br />
          <label for="beschrijving">Beschrijving bedrijf</label>
          <textarea name="beschrijving" id="beschrijving" onKeyPress="return charLimit(this)" onKeyUp="return characterCount(this)" rows="8" cols="40"></textarea>
          <p class="charcounter"><strong><span id="charCount">500</span></strong> karakters beschikbaar.</p>


<input type="submit" value="Verzenden">
</form>

该代码有效，但只有在按下提交后，我才能从之前选择的省份中选择城市。

我需要它来进行更改，我该如何解决这个问题？

我是编程新手，现在真的陷入困境。

提前致谢

克拉斯

Answer 1

$( document ).ready(function() {

       $('#provincie').on('change', function(event){
    if($(this).val() == '#provincie'){
        $("#result_div").empty()
    }else{
        var values = $(this).serialize();
        $.ajax({
            url: "toevoegen.php",
            type: "post",
            data: values,
            success: function(data){
                $("#result_div").empty().append(data);
            },
            error:function(){
                $("#result_div").empty().append('something went wrong');
            }
        });
    }
   });
});

希望它对您有用。如果没有，请告诉我。