Multiple dropdown list to load content

tekdz · September 25, 2010

(not sure if this should be in php or javascript section)

I am trying to create a dropdown list that loads content according to the option chosen..

The idea is that you select from 4 or so dropdown boxes, which then selects the appropriate content that the user picked

Pretty much like http://www.cooldiamonds.com/ (after you click enter)

This is what I've got so far:

Option.html


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script><br>

<script type="text/javascript">

$(document).ready(function(){
  $('.select').change(function() {
						   
    var option = $(this).val();
    $.get('option.php', {select:option}, function(data) {
      $('#result').html(data).hide().fadeIn(1000);
    });
  });
  
});
</script>

</head>

<body>


<p> Selection 1</p>
<select name="select" id="select" class="select">
<option value="">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>


<p> Selection 2</p>
<select name="select2" id="select2" class="select">
<option value="">Select</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>

<p> Selection 3</p>
<select name="select3" id="select3" class="select">
<option value="">Select</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
</select>

<p> Selection 4</p>
<select name="select3" id="select3" class="select">
<option value="">Select</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
</select>


<div id="result" style="border:1px solid #000;padding:10px;color:#ff0000;display:none;"></div>

option.php

<?php

   // Multiple Selections
if ($_GET['select'] == 'option1' && $_GET['select2'] == 'option3') {
  echo 'the option you have chosen is 1 and 3';} 
elseif ($_GET['select2'] == 'option4' && $_GET['select3'] == 'option5' && $_GET['select4'] == 'option7') {
  echo 'the option you have chosen is 4, 5 and 7';}   
  
  // and so on
  
  //Selection 1
  elseif($_GET['select'] == 'option1') {
  echo 'the option you have chosen is 1';} 
  elseif($_GET['select'] == 'option2') {
  echo 'the option you have chosen is 2';} 
  
  //Selection 2
  elseif($_GET['select2'] == 'option3') {
  echo 'the option you have chosen is 3';} 
  elseif($_GET['select2'] == 'option4') {
  echo 'the option you have chosen is 4';} 

  //Selection 3
  elseif($_GET['select3'] == 'option5') {
  echo 'the option you have chosen is 5';} 
  elseif($_GET['select3'] == 'option6') {
  echo 'the option you have chosen is 6';} 

  // Selection 4
  elseif($_GET['select4'] == 'option7') {
  echo 'the option you have chosen is 7';} 
  elseif($_GET['select4'] == 'option8') {
  echo 'the option you have chosen is 8';} 

?>

You can view it here: http://adamwatkin.com/option.html

As you can see selection 1 works fine, but the other selections do not work and neither does multiple selections.

Its almost certainty theres errors in the code, does anyone have any idea what the problem is?

Any help will be appreciated

Cheers

joel24 · September 26, 2010

//put in 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script><br>

<script type="text/javascript">

$(document).ready(function(){
  $('.select').change(function() {
                        
    var option = $(this).val();
alert(option);
    $.get('option.php', {select:option}, function(data) {
      $('#result').html(data).hide().fadeIn(1000);
    });
  });

});
</script>

and then change the PHP script to echo all $_GET values

<?php

print_r($_GET);
exit();

   // Multiple Selections
if ($_GET['select'] == 'option1' && $_GET['select2'] == 'option3') {
  echo 'the option you have chosen is 1 and 3';} 
elseif ($_GET['select2'] == 'option4' && $_GET['select3'] == 'option5' && $_GET['select4'] == 'option7') {
  echo 'the option you have chosen is 4, 5 and 7';}   
  
  // and so on
  
  //Selection 1
  elseif($_GET['select'] == 'option1') {
  echo 'the option you have chosen is 1';} 
  elseif($_GET['select'] == 'option2') {
  echo 'the option you have chosen is 2';} 
  
  //Selection 2
  elseif($_GET['select2'] == 'option3') {
  echo 'the option you have chosen is 3';} 
  elseif($_GET['select2'] == 'option4') {
  echo 'the option you have chosen is 4';} 

  //Selection 3
  elseif($_GET['select3'] == 'option5') {
  echo 'the option you have chosen is 5';} 
  elseif($_GET['select3'] == 'option6') {
  echo 'the option you have chosen is 6';} 

  // Selection 4
  elseif($_GET['select4'] == 'option7') {
  echo 'the option you have chosen is 7';} 
  elseif($_GET['select4'] == 'option8') {
  echo 'the option you have chosen is 8';} 

?>

this should help you to rectify the problem, knowing what $_GET values are being sent and ensuring they are as they should be.

tekdz · September 26, 2010

//put in 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script><br>

<script type="text/javascript">

$(document).ready(function(){
  $('.select').change(function() {
                        
    var option = $(this).val();
alert(option);
    $.get('option.php', {select:option}, function(data) {
      $('#result').html(data).hide().fadeIn(1000);
    });
  });

});
</script>

and then change the PHP script to echo all $_GET values

<?php

print_r($_GET);
exit();

   // Multiple Selections
if ($_GET['select'] == 'option1' && $_GET['select2'] == 'option3') {
  echo 'the option you have chosen is 1 and 3';} 
elseif ($_GET['select2'] == 'option4' && $_GET['select3'] == 'option5' && $_GET['select4'] == 'option7') {
  echo 'the option you have chosen is 4, 5 and 7';}   
  
  // and so on
  
  //Selection 1
  elseif($_GET['select'] == 'option1') {
  echo 'the option you have chosen is 1';} 
  elseif($_GET['select'] == 'option2') {
  echo 'the option you have chosen is 2';} 
  
  //Selection 2
  elseif($_GET['select2'] == 'option3') {
  echo 'the option you have chosen is 3';} 
  elseif($_GET['select2'] == 'option4') {
  echo 'the option you have chosen is 4';} 

  //Selection 3
  elseif($_GET['select3'] == 'option5') {
  echo 'the option you have chosen is 5';} 
  elseif($_GET['select3'] == 'option6') {
  echo 'the option you have chosen is 6';} 

  // Selection 4
  elseif($_GET['select4'] == 'option7') {
  echo 'the option you have chosen is 7';} 
  elseif($_GET['select4'] == 'option8') {
  echo 'the option you have chosen is 8';} 

?>

this should help you to rectify the problem, knowing what $_GET values are being sent and ensuring they are as they should be.

Hey man thanks a lot for the reply

Adding that in makes the all the choices work which is great! But it also makes a pop box appear and it doesnt display the text for the option choice ( its now like Array ( [select] => option1 ) ) and if the user selects multiple dropdowns that still doesnt work. Updated it on : http://adamwatkin.com/option.html

Any idea on whats going wrong?

Been banging my head on the wall trying to work this one out

Cheers

joel24 · September 26, 2010

I added the alert (pop box) line in so you could ensure the correct data was being sent to the PHP page.

you can remove the line "alert(option);" in the jquery / javascript.

as for the 'Array ( [select] => option2 ) ", that is the print_r($_GET); telling us what is being received by $_GET.

You should use a switch statement instead of all your if/else ifs. read about switch here

switch ($_GET['select']) {
    case "option1":
        echo "option1";
        break;
    case "option2":
        echo "option2";
        break;
    case "option3":
        echo "option3";
        break;
default:
echo "No Option Selected";
}

//you can finish switch code to include all your options and their corresponding data

######

and also, the problem in your current code is that you are trying to echo $_GET['select2'], then $_GET['select3'] etc when in your Jquery you are sending the $_GET variables with the index "select" in "select:option"

    $.get('option.php', {select:option}, function(data) {
      $('#result').html(data).hide().fadeIn(1000);
    });

if you wish to have it sent via $_GET with index option2, option3 etc, you can change select:option in the jquery to $(this).attr("name") > the name of the form element

//put in 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script><br>

<script type="text/javascript">

$(document).ready(function(){
  $('.select').change(function() {
                        
var myIndex = $(this).attr("name");
    var option = $(this).val();
alert(option);
    $.get('option.php', {myIndex:option}, function(data) {
      $('#result').html(data).hide().fadeIn(1000);
    });
  });

});
</script>

Sign In

Multiple dropdown list to load content

Recommended Posts

tekdz

Link to comment

Share on other sites

joel24

Link to comment

Share on other sites

tekdz

Link to comment

Share on other sites

joel24

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information