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

我使用PHP从MySql中检索数据。一切工作正常，但不是单选按钮。我想要做的是，随着文本框值的变化，我也想改变复选框的值，但留下一些复选框值完好无损。下面是代码：基于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); 
    } 
});

来源

2016-01-22 crozland23

和wh问题在哪里？看起来你的代码正在做你想做的事。你能更深入地解释这个问题吗？ – CodeGodie

它没有。如果你运行代码，它只会改变文本框的值，而不会改变单选按钮。 – crozland23

摆脱重复的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

来源

2016-01-22 15:26:37 yunicz

还没有这个运气。 – crozland23

那么你的代码的其他部分必须有问题，我已经添加小提琴 – yunicz

是的。它与小提琴一起工作。如果我的数据库中的性别值是0或1，这将是真实的吗？ – crozland23

首先，你需要改变你这样的输入射频值（与 “男性” 和 “女性”），以配合您的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);

来源

2016-01-22 15:21:00 smdsgn

没有这个运气。所有其他值都会更改，但不会显示单选按钮。 – crozland23

这项工作是什么，我会在你的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); 
     } 
    } 
});

来源

2016-01-22 15:32:33 CodeGodie

这也没有工作。所有其他值都会更改，但不会显示单选按钮。 – crozland23

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

回答

相关问题