php - 如何从 MySQL 中的表的列中获取特定项目并使用它来使另一个 <select> 更改其可见性

标签 php jquery mysql ajax

我的问题是我想从此处的表格列中获取带有照片的特定项目[1]:https://i.ibb.co/4KcwScM/Captfffffure.png “标题的第一项”我想获取这个特定值并隐藏和可见某些选项

这里是解释更多的代码,我希望当人们选择这个特定标题时,它会向他们显示另一个特定部分,在这张照片中[2]:https://i.ibb.co/hyRcfPS/Carrrrrrrrrrrrrrrrrpture.png “该部分将显示”,当它们显示其他选项时,它将隐藏前一部分,并对所有其他选项显示一个新部分[3]:https://i.ibb.co/K05PpkL/Capturffffffffffae.png“这个解释了一切”。

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

此代码位于第一个代码之后

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

这是它的ajax

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

这是代码,其他的相同但行不同

 <?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>";
    ?>

特定项目的这一部分的代码,从特定列中我已经找到了选择该项目并显示它的解决方案,问题是它获取了选择的所有项目的部分,并且当选择不是时我想隐藏这个项目 特定项目的此部分的代码

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

这里是ajax代码

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

有 wpcontactusnum.php 代码,其他相同但行不同

<?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>";
    ?>

最佳答案

要检查所选选项是第一个还是第二个,您可以执行以下操作:

Ajax 代码:

 $("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();

   }
  });

关于php - 如何从 MySQL 中的表的列中获取特定项目并使用它来使另一个 <select> 更改其可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57411204/

相关文章:

mysql - MySQL bigint转UUID的存储过程

php - 尝试使用 PHP 脚本的 CSS 更改表格中替代行的颜色

javascript - 显示网页预览

javascript - jQuery 排除特定页面的 document.ready 事件

jquery - 如何使用 jquery.metro.js ?无法正常工作?

php - 查询数据库时收到错误

mysql - MVC 将数据输入到 SQL 表中。网站工作没有错误,但当我单击 ShowTableData 时,一切都是 Null

php - laravel 5.5 中数据未保存到数据库

php - 为什么我的查询不使用绑定(bind)参数插入?但它使用相同的bind_param进行更新

javascript - Highcharts 列适合/调整图表