基於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的單選按鈕值更改數據

回答

相關問題