如何从MySQL的表的列中获取特定项目并使用它来制作另一个 <select>改变其知名度

Question

my problem is i want to get specific item from column of table here with photo [1]: https://i.ibb.co/4KcwScM/Captfffffure.png "the first item of the title" i want to get this specific value and hide and visible some option

here is the code to explain more , this select i want when people select this specific title it will show them another specific section which in this photo [2]: https://i.ibb.co/hyRcfPS/Carrrrrrrrrrrrrrrrrpture.png ""the section will show" , and when they show other options it will hide the previous section and visible a new section to all the other options [3]: https://i.ibb.co/K05PpkL/Capturffffffffffae.png "this one explain every thing".

<label style="margin-left:20px; padding: 0 20px;
    margin-bottom: 39px;">كيف نساعدك؟  </label><select name="topic"  id="type" Required="Required">
        <option>اختر الخدمة</option>
<?php
// Make the connection:
$connection = mysqli_connect ('localhost', '#', '#', '#');
// If no connection could be made, trigger an error:
if ($connection->connect_error)
{
    die("Database selection failed: " . $connection->connect_error);
}
# Set encoding to match PHP script encoding.
mysqli_set_charset($connection, 'utf8');
$query = "SELECT * FROM newservices";
$select_newservice = mysql_query($query);
while ($row = @mysql_fetch_assoc($select_newservice)) {
echo "<option value=\"".$row['id']."\">".$row['title']."</option>\n  ";
}
?>
</select><br>

this code after the first one

<div id="price"> 
<label style="    margin-left: 136px;
    margin-bottom: 30px;     padding: 0 20px;">سعر الخدمة</label><select disabled style="
    -webkit-appearance: none;
"    Required="Required">
        <option>0$</option>
</select>
</div>
<div id="tax"> 
       <label style="margin-left:40px;     padding: 0 20px;"> سعر الخدمة شامل الضريبة</label><span class='prisee'>0$</span><br>
       </div>

here is the ajax of it

<script>
 $("select[name='topic']").on("change",function(e) {
     e.preventDefault();
    //getting selected  value
    var topic=$(this).val();
    console.log(topic);
        $.ajax({
            type: 'POST',
            url: 'contactusprise.php',
             data: {'topic': topic },//<-passing value to php
            success: function(php) {
               $("#price").html(php);//<--response will show in div with id=price
            }               
        });

    });
</script>
<script>
 $("select[name='topic']").on("change",function(e) {
     e.preventDefault();
    //getting selected  value
    var topic=$(this).val();
    console.log(topic);
        $.ajax({
            type: 'POST',
            url: 'contactustax.php',
             data: {'topic': topic },//<-passing value to php
            success: function(php) {
               $("#tax").html(php);//<--response will show in div with id=price
            }               
        });

    });
</script>

this is code it and the other are the same but with different row

 <?php
    // Make the connection:
    $connection = mysqli_connect ('localhost', '#', '#', '#');
    // If no connection could be made, trigger an error:
    if ($connection->connect_error)
    {
        die("Database selection failed: " . $connection->connect_error);
    }
    $topic=$_POST['topic'];//<-getting value which is passed from ajax
    # Set encoding to match PHP script encoding.
    mysqli_set_charset($connection, 'utf8');
 //here column name will be name of coulmn which you need to compare 
    $query = "SELECT * FROM newservices where id= ".$topic;
    $select_newservice = mysqli_query($connection, $query);
    echo '<label style=" margin-left: 136px;
    margin-bottom: 30px;padding: 0 20px;">السعر بضريبة البيبال</label><select  style="
    -webkit-appearance: none;
" disabled name="topic1"   Required="Required">';
    while ($row = mysqli_fetch_assoc($select_newservice)) {
    echo "<option value=\"".$row['id']."\" >".$row['tax']."</option>\n  ";
}

    echo "</select>";
    ?>

code of this section of the specific item which from specific column i am already found solution of select the item and show it ,the problem it get the section for all items of select and i want to hide when the select isn't this item the code for this section of the specific item

<div id="containeer" >
<div id="chango" style="
    display: inline-flex;
    width: 286px;
">
<label style="margin-left:20px; padding: 0 20px;
    margin-bottom: 39px;">عدد الصفحات </label> <input type="text" class="form-controle" name="topic1" placeholder="اختر العدد" style="
    width: 118px;
    text-align-last: center;
">
    </div>
<div id="wprice" style="display: inline-flex;
    width: 286px;" >
<label style="margin-left:20px; padding: 0 20px;
    margin-bottom: 39px;">عدد الكلمات</label><select style="-webkit-appearance: none;    width:118px;
    text-align-last: center;" Required="Required">

</select>
</div>
<div id="pricee" style="
    display: inline-flex;
    width: 286px;
"> 
<label style="    margin-left: 136px;
    margin-bottom: 30px;     padding: 0 20px;">السعر الاجمالي</label><select disabled style="
    -webkit-appearance: none;margin-right: -65px;
"    Required="Required">
        <option>0$</option>
</select>
</div>
<div id="pricees" style="
    display: inline-flex;
    width: 286px;
"> 
<label style="    margin-left: 61px;
    margin-bottom: 30px;     padding: 0 13px;">السعر الاجمالي شامل الضريبة</label><select disabled style="
    -webkit-appearance: none;margin-right: -60px;
"    Required="Required">
        <option>0$</option>
</select>
</div>
</div>

here is the ajax codes

<script>
 $("input[name='topic1']").on("change",function(e) {
     e.preventDefault();
    //getting selected  value
    var topic1=$(this).val();
    console.log(topic1);
        $.ajax({
            type: 'POST',
            url: 'wpcontactusnum.php',
             data: {'topic1': topic1 },//<-passing value to php
            success: function(php) {
               $("#wprice").html(php);//<--response will show in div with id=price
            }               
        });

    });
</script>
<script>
 $("input[name='topic1']").on("change",function(e) {
     e.preventDefault();
    //getting selected  value
    var topic1=$(this).val();
    console.log(topic1);
        $.ajax({
            type: 'POST',
            url: 'price_pages.php',
             data: {'topic1': topic1 },//<-passing value to php
            success: function(php) {
               $("#pricee").html(php);//<--response will show in div with id=price
            }               
        });

    });
</script>
<script>
 $("input[name='topic1']").on("change",function(e) {
     e.preventDefault();
    //getting selected  value
    var topic1=$(this).val();
    console.log(topic1);
        $.ajax({
            type: 'POST',
            url: 'taxprice_pages.php',
             data: {'topic1': topic1 },//<-passing value to php
            success: function(php) {
               $("#pricees").html(php);//<--response will show in div with id=price
            }               
        });

    });
</script>

there is the wpcontactusnum.php code the other are same but different rows

<?php
    // Make the connection:
    $connection = mysqli_connect ('localhost', '#', '#', '#');
    // If no connection could be made, trigger an error:
    if ($connection->connect_error)
    {
        die("Database selection failed: " . $connection->connect_error);
    }
    $topic1=$_POST['topic1'];//<-getting value which is passed from ajax
    # Set encoding to match PHP script encoding.
    mysqli_set_charset($connection, 'utf8');
 //here column name will be name of coulmn which you need to compare 
    $query = "SELECT * FROM details where pages= ".$topic1;
    $select_detail = mysqli_query($connection, $query);
    echo '<label style=" margin-left: 31px; 
    margin-bottom: 39px;padding: 0 20px;">عدد الكلمات</label><select  style="
    -webkit-appearance: none;width: 118px;
    text-align-last: center;
" disabled name="topic1"   Required="Required">';
    while ($row = mysqli_fetch_assoc($select_detail)) {
        $detail_words = $row['words'];
    echo "<option value=\"".$row['pages']."\"  >".$row['words']."</option>\n  ";
}

    echo "</select>";
    ?>

Answer 1

To check if the selected option is first or second you can do like below :

Ajax code :

 $("select[name='topic']").on("change",function(e) {
     e.preventDefault();

  //checking if first option is selected
    if($(this)[0].selectedIndex == 0)
    {
        //hide topic1
        $("select[name='topic1']").hide();
         //show price and tax
         $("#price").show();
         $("#tax").show();
    }
   else if($(this)[0].selectedIndex == 1) {
      //hide price and tax
       $("#price").hide();
         $("#tax").hide();
      //show topic1
        $("select[name='topic1']").show();

   }
  });