使用 Json 如何根据数据库中的值选择单选按钮

Using Json how can I select a radio button based on value in my database?

本文关键字:选择 单选按钮 数据库 Json 何根 使用      更新时间:2023-09-26

嗨,我有一个表单,它有一个按钮,用于用数据库中的数据预填充我的表单。 使用 Json 填充文本输入可以正常工作,但是如何让它根据从数据库返回的值选择单选按钮?

形式

<form action="#">
<select id="dropdown-select" name="dropdown-select">
<option value="">-- Select One --</option>
</select>
<button id="submit-id">Prefill Form</button>
<input id="txt1" name="txt1" type="text">
<input id="txt2" name="txt2" type="text">
<input type="radio" id="q1" name="q1" value="4.99" />
<input type="radio" id="q1" name="q1" value="7.99" />
<button id="submit-form" name="Submit-form" type="submit">Submit</button>

</form> 

脚本

<script>
     $(function(){

        $('#submit-id').on('click', function(e){  // Things to do when 
.......
.done(function(data) {
    data = JSON.parse(data);
$('#txt1').val(data.txt1);
$('#txt2').val(data.txt2);
$('#q1').val(data.q1);
});
        });
     });
</script>
/

tst/orders2.php

<?php
    // Create the connection to the database
    $con=mysqli_connect("xxx","xxx","xxx","xxx");

........

        while ($row = mysqli_fetch_assoc($result)) 
            {
     echo json_encode($row);
     die(); // assuming there is just one row
        }
    }
    ?>

不要使用 ID,因为两个单选按钮的 ID 相同

done(function(data) {
  data = JSON.parse(data);
  $('#txt1').val(data.txt1);
  $('#txt2').val(data.txt2);
  // Don't use ID because the name of id is same
  // $('#q1').val(data.q1);
  var $radios = $('input:radio[name=q1]');
  if($radios.is(':checked') === false) {
    $radios.filter('[value='+data.q1+']').prop('checked', true);
  }
  });

您当前有两个单选按钮使用相同的 ID。

可以使用 [name] 属性执行此操作,也可以在元素上设置类。下面是一个示例:

 $('input[name=q1][value="'+ data.q1 +'"]').prop('checked', true);
您可以根据

所述输入的值进行操作:

而不是

$('#q1').val(data.q1);

尝试

$('input:radio[value="' + data.q1 + '"]').click();

附带说明一下,您有两个具有相同 ID 的无线电,基于 id 的选择器的结果因浏览器而异,因为 id 应该是唯一的

您可以

参考以下链接来解决您的问题。 对我来说效果很好

JQuery - 如何根据值选择下拉项