Question

我正在使用PHP从MySql中检索数据。一切正常，但没有单选按钮。我想要做的是，随着文本框值的改变，我还想更改复选框的值，但保留一些复选框值不变。以下是代码：

HTML：

 <select id="userDropdown"></select>

   <label>Name</label>
   <input type="text" id="name" />

   <label>Phone</label>
   <input type="text" id="phone" />

 **<p>
   M:<input type="radio" class="flat" name="gender" id="gender" value="M" checked="" required />
   F:<input type="radio" class="flat" name="gender" id="gender" value="F" />
 </p>**

的Javascript

//sql data...
var data = [
    {username: 'User 1', name: 'Bill', phone: '123-456-789', gender: 'male'},
    {username: 'User 2', name: 'John', phone: '123-456-987', gender: 'male'},
    {username: 'User 3', name: 'Mary', phone: '123-654-789', gender: 'female'}
];

var dropdown = $('#userDropdown');
dropdown.append('<option value="" >Select User</option>');
for(var i = 0; i < data.length; i++){
    var item = data[i];
    dropdown.append('<option value="' + item.username + '" >' + item.username + '</option>');
}

$('#userDropdown').change(function(){
    var user = this.value;
    var dataItem = $.grep(data, function(e){ return e.username == user; });

    if(dataItem.length > 0){
        $('#phone').val(dataItem[0].phone);
        $('#name').val(dataItem[0].name);
        $('#gender').val(dataItem[0].gender);
    }
});

Answer 1

首先，您需要更改这样的输入无线电值（使用＆＃34;男性＆＃34;和＃34;女性＆＃34;）以匹配您的SQL数据：

<p>
   M:<input type="radio" class="flat" name="gender" id="gender" value="male" checked="" required />
   F:<input type="radio" class="flat" name="gender" id="gender" value="female" />
</p>

然后改变这一行：

$('#gender').val(dataItem[0].gender);

像这样：

$("input[name=gender][value=" + dataItem[0].gender + "]").attr('checked', 'checked');

或者像这样（因为jQuery 1.6）：

$("input[name=gender][value=" + dataItem[0].gender + "]").prop('checked', true);

Answer 2

摆脱重复的ID，让它变得简单。 HTML5 id规范here。

HTML：

<p>
   M:<input type="radio" class="flat" name="gender" id="gender-male" value="M" checked="" required />
   F:<input type="radio" class="flat" name="gender" id="gender-female" value="F" />
</p>

使用Javascript：

if(dataItem.length > 0){
    $('#phone').val(dataItem[0].phone);
    $('#name').val(dataItem[0].name);
    $('#gender-'+dataItem[0].gender).prop('checked', true);
}

您可以在此Fiddle

中看到它的工作原理

Answer 3

这就是我在你的change函数中所做的事情：

dropdown.change(function () {
    var user = this.value;
    var dataItem = $.grep(data, function (e) {
        return e.username == user;
    });
    if (dataItem.length > 0) {
        var $m_input= $('input[name="gender"][value="M"]');
        var $f_input= $('input[name="gender"][value="F"]');

        if(dataItem[0].gender === "male"){
            $m_input.prop('checked', true);
            $f_input.prop('checked', false);
        } else {
            $m_input.prop('checked', false);
            $f_input.prop('checked', true);
        }
    }
});

基于MySql数据的单选按钮值更改

3 个答案: