Jump to content

Multiple dropdown list to load content

tekdz

By tekdz
in PHP Coding Help

 Share

Recommended Posts

tekdz Newbie

tekdz

Posted
Posted

(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

Link to comment
Share on other sites
joel24 Member

joel24

Posted
Posted 

//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.

Link to comment
Share on other sites
tekdz Newbie

tekdz

Posted
  • Author
Posted 

//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

 

Link to comment
Share on other sites
joel24 Member

joel24

Posted
Posted

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>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.