HTML Select标签和jQuery显示和隐藏

Question

UPDATE: Looking at people's suggestions, I've realized I should go without AJAX. I decided to change the load function and now put the jquery code inside it. However, it still does not work as no elements are being displayed as visible. Here is what the new code looks like.

<style>

.input_1 {display: none;}

.input_2 {display: none;}

.input_3 {display: none;}

</style>

<script type="text/javascript">

var numbers = $('#select_number').val();

function load(numbers) {    
if (numbers == 1) 
{$("input").hide();$(".input_1").show();} else 
if (numbers == 2) 
{$("input").hide();$(".input_1").show();$(".input_2").show();} else
if (numbers == 3) 
{$("input").hide();$(".input_1").show();$(".input_2").show();$(".input_3").show();}}

</script>

And here is what the select tag looks like now

<form id="form" action="" method="post">

<select id="select_number" onclick="load( numbers );" >

<option>1</option>
<option>2</option>
<option>3</option>

</select>

<input type="text" class="input_1"/>

<input type="text" class="input_2"/>

<input type="text" class="input_3"/>

</form>

Answer 1

<select id="select_number" onclick="load('ajax_file.php', number_of_places );">

What value is "number_of_places" when you click the element? According to your code, it's set once and never changed.

One solution is to get the value just before sending it:

function load(thefile) {    
    var number = $('#select_number').val();
    $.get(thefile, {number : number});
}

Or get the value on the function call

<select id="select_number" onclick="load('ajax_file.php', $('#select_number').val());">

In addition, you're not performing any action on the result. Maybe you want it that way? But if not, you need to add something like this:

$.get(thefile, {number : number}, function (data){
        alert('The results are: ' + data);
        // do something with the results
    }
);

I hope that helps!

Answer 2

I would use jQuery to accomplish such a task. jQuery makes it exteremly easy to use AJAX calls.

var myVar = $.get( "ajax_file.php",
                   "/*data to be sent to php file (optional)*/",
                   function(data) { /*whatever you want you do (or simply leave it empty if your php does what you need)*/ },
                  "text" /*data Type*/
                 );

Answer 3

Jquery cannot execute remotely on the server, so the jquery in your Ajax call will do nothing. This is fundamental to the nature of jquery, its not a server side language.

 function load(thefile) {    
    var number_of_places = $('#select_number').val();
    $.get(thefile, {number : number_of_places}, function(numbers){
        if (numbers = 1) 
           {$("#input_1").show();} else 
        if (numbers = 2) 
           {$("#input_1").show();$("#input_2").show();} else
        if (numbers = 3) 
           {$("#input_1").show();$("#input_2").show();$("#input_3").show();}
    });
  )};

php file:

  <?php

  if (isset($_GET['number']) === true && empty($_GET['number']) === false) {
       print $_GET['number'];
  }

  ?>

Answer 4

Found out the solution. Add $('#select_number').val() within the load function in the onclick attribute and it works. Thanks everyone for their help.