-1

i have 4 select boxes in my webpage, 1st type, 2nd province, 3rd genre, 4 th user, i need to filter the 3rd and 4th select drop down boxes based on the 1st and 2nd, ie if i select buy beats in 1st and a province in 2nd, the 4th box should display the beat makers in that selected province and the 3rd box is based on the 1st its working properly. My problem the user box not displaying the user of particular province.

I have given my code below please help

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<form action="send_request.php" name="myForm1" method="post" onsubmit="return(validate1());">
<div class="sec1 lef">
 <select class="regtext sec1test" name="select" id="select1" style="width:99%">
    <option value="0">Select What?</option>
<option value="1">Features</option>
<option value="2">Video-shoot</option>
<option value="3">Buy Lyrics</option>
<option value="4">Buy Beats</option>
</select>
</div>

<div class="sec1 lef">
<select class="regtext sec1test" name="province" style="width:99%">
<option value="0">Select Province</option>
<?php
$select_province=mysql_query("SELECT * FROM `wilinkit_province` WHERE 1");
while($fetch_province=mysql_fetch_array($select_province))
{
echo "<option value='".$fetch_province['province_id']."'>".$fetch_province['province_name']."</option>";
}
?>
</select>
</div>
<div class="sec1 lef">
<select name="type" class="regtext sec1test" id="select2" style="width:99%">
  <option id="0" value="0">Select genre</option>
 <?php
    $select_genre=mysql_query("SELECT * FROM `wilinkit_genre` WHERE 1");
    while($fetch_genre=mysql_fetch_array($select_genre))
    {
        echo "<option value='".$fetch_genre['genre_id']."' data-id='1'>".$fetch_genre['genre_name']."</option>";
    }
?>
  <option value="2" data-id="2">models</option>
  <option value="3" data-id="3">Composer</option>
  <option value="4" data-id="4">Beatmaker</option>
</select>
</div>

<div class="sec1 lef">
<select name="name" class="regtext sec1test" id="select3" style="width:99%">
  <option id="0" value="0">Select User</option>
  <?php
$select_artist111=mysql_query("SELECT * FROM `wilinkit_users` WHERE 1");
while($fetch_artist111=mysql_fetch_array($select_artist111))
{
$user_type=$fetch_artist111['user_type'];
echo "<option value=".$fetch_artist111['username']." data-id='".$user_type."'>".$fetch_artist111['username']."</option>";
}
?>

</select>
</div>
<div class="sec2 lef" >
<input type="submit"  class="requestbutton" value="Request" />
</div>
</form>
 <script type="text/javascript">
    $(document).ready(function () {
var $select1=$("#select1");
var $select2=$("#select2");
var $select3=$("#select3");

$select1.data('options1', $select2.html())
$select1.data('options2', $select3.html())

$select1.change(function(){
    var val=$select1.val();
    var options1 = $($select1.data('options1')).filter('[data-id="'+val+'"]');
    var options2 = $($select1.data('options2')).filter('[data-id="'+val+'"]');
    $select2.html(options1);
    $select3.html(options2);
   });
 });
</script>
Chonchol Mahmud
  • 2,717
  • 7
  • 39
  • 72
  • 1
    PHP is a server-side technology, not client-side. You need to look into AJAX. – elixenide Jan 04 '16 at 04:26
  • not in php, i need the solution in javascript – Brindha Nisam Jan 04 '16 at 04:28
  • Your question title is "filtration of select box in client side using php." The question itself is very unclear, you tagged it [tag:php], and you've included a bunch of PHP code. If you need a JavaScript solution, you need to strip out the non-JavaScript portions of the question and ask a focused question. Please clarify the question. As it is, it's extremely unclear what you're asking. – elixenide Jan 04 '16 at 04:51

1 Answers1

1

You can use jQuery/AJAX to help solve this problem.

This SO answer is similar to what you need:

dynamic drop down box?

Also, here are some other examples of how AJAX works and what it is:

A simple example

More complicated example

Here is a (free) video course on AJAX:

theNewBoston AJAX course

Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111