javascript - 如何使用基于下拉选择的单选按钮显示数据?

标签 javascript php postgresql

我正在尝试动态生成前面带有数据的单选按钮。要显示在单选按钮前面的数据基于下拉选择,它还使用 javascript 在文本框中显示一些数据。

我尝试将所选选项放入字符串中并在下一个查询中使用它,但我知道我做错了。

数据库连接

$db = pg_connect("");
$query = "select account_name,account_code,address1,address2,address3 FROM 
customers";
$result = pg_query($db,$query);

//新查询

 $sql1= "select name from conferences";
      $result1= pg_query($db, $sql1);

//结束

//新代码

 <select class="form-control" id="conference"  name="conference">
 <option value="">Select Conference...</option>
 <?php while($rows1 = pg_fetch_assoc($result1)) { ?>
    <option value="<?= $rows1['code']; ?>"><?= $rows1['name']; ?></option>
 <?php } ?>
 </select>
                <br>

//新代码结束

用于选择数据的下拉菜单。

<select onchange="ChooseContact(this)" class="form-control" 
id="account_name"  name="account_name" >

<?php
while($rows= pg_fetch_assoc($result)){ 
echo  '<option value=" '.$rows['address1'].'  '.$rows['address2'].' 
'.$rows['address3'].''.$rows['account_code'].'">'.$rows['account_name'].' 
'.$_POST[$rows['account_code']].' 
</option>';
}?>
</select> 

使用 javascript 根据选择的值在文本区域中显示数据。 (代码到这里都可以正常工作)

<textarea readonly class="form-control" style="background-color: #F5F5F5;" 
id="comment" rows="5" style="width:700px;"value=""placeholder="Address..."> 
</textarea>
                <script>
                function ChooseContact(data) {
document.getElementById ("comment").value = data.value;
            }
                </script> 

根据所选选项在单选按钮前面显示数据(如果我在查询中使用一些随机值,此代码有效,但如果我使用上一个查询中的所选值“account_code”则无效。我正在使用POST GET方法携带选中的值)

 <?php

//新代码

 $sql = "select  order_number, order_date from orders where 
 customer_account_code =  '3000614' and conference_code='DS19-'"; <-Data 
 gets displayed when put random value like this.

 $code = $_GET[$rows['account_code']];
 $conf = $_GET[$rows1['conference_code']];
 $sql = "select  order_number, order_date from orders where 
customer_account_code = '$code' and conference_code= '$conf']"; <- But I 
want to display the data against the selected value, i.e, the 'account_code' 
in the variable $code from the dropdown select 

//结束

$res = pg_query($db,$sql);

while($value = pg_fetch_assoc($res) ){
echo "<input type='radio' name='answer' 
value='".$value['order_number']." ".$value['order_date']."'>" 
.$value['order_number'].$value['order_date']." </input><br />";
                    }
                    ?>

我需要帮助找到一种方法,将选定的“account_code”放入一个变量中,并在 $sql 查询中使用它。

最佳答案

请尝试使用此代码:(它对我有用)

1- 将此行添加到您的 HTML <head> :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>

2- 将您的代码修改为:

用于选择数据的下拉列表:

<select class="form-control" id="account_name"  name="account_name">
    <option value=""></option>
    <?php while($rows = pg_fetch_assoc($result)) { ?>
        <option value="<?= $rows['address1'].' '.$rows['address2'].' '.$rows['address3'].'-'.$rows['account_code']; ?>"><?= $rows['account_name']; ?></option>
    <? } ?>
</select>

使用 jQuery 根据所选值在文本区域中显示数据:

<textarea readonly class="form-control" style="background-color: #F5F5F5;" 
id="comment" rows="5" style="width:700px;" value="" placeholder="Address..."></textarea>

jQuery 代码:

<script type="text/javascript">
    $('#comment').val($('#account_name').val()); // MAKE A DEFAULT VALUE
(function($) {
    $('#account_name').change(function() {
        $('#results').html(''); // REMOVE THE OLD RESULTS 
        var option = $(this).val();
        $('#comment').val(option);
        // EDIT RADIO WITH AJAX 
        $.ajax({
            type: "POST",
            url: "path/test.php",
            dataType:'JSON',
            data: $('#account_name').serialize()
        }).done(function(data) {
            for (var i = 0; i < data.length; i++) {
                // ADD RADIO TO DIV RESULTS
                $('#results').append('<input type="radio" name="answer" value="'+data[i].order_number+'">'+data[i].order_date+'</input><br>');
            }
        });
    });
})(jQuery);
</script>

之后,将此 HTML 添加到您的页面,以显示 AJAX 数据的结果

<!-- RADIOs -->
<div id="results"></div>

3- 创建一个新文件,如 path/test.php

在此文件中,使用此 CODE 返回值 使用 JSON :)

<?php
header('Content-type: application/json');

// CONNECT (JUST USE YOUR CUSTOM CONNECTION METHOD & REQUIRE CONFIG FILE IF YOU WANT)
$db = pg_connect("");

$value = explode('-', $_POST['account_name']);

// EXPLODE AND GET LAST NUMBER AFTER < - >
$code = (int) end($value);

$sql = "select order_number, order_date from orders where customer_account_code =  '$code'";

$res = pg_query($db, $sql);

// CREATE JSON RESULTS
$is = '';
while($data = pg_fetch_assoc($res)) {
    $is .= json_encode($data).', ';
}

// AND GET ALL 
echo '['.substr($is, 0, -2).']';
?>

关于javascript - 如何使用基于下拉选择的单选按钮显示数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54004534/

相关文章:

javascript - Bootstrap 选择选项验证不起作用

php - 如何跳过数组的日期并将日期增加+1?

postgresql - 在 postgresql 函数中捕获选择查询返回值并使用它

javascript - 在 PostgreSQL 中 COPY/INSERT ON CASCADE 的最佳方法是什么?

bash - 将 PSQL 添加到 .bash_profile mac

javascript - Angular 2 - 选择绑定(bind)

javascript - 如何访问 Javascript 对象的第一个属性?

javascript - 按内容排序

php - 如何在条件下使用 str_replace

php - 在 Laravel 中对闭包进行单元测试