douwo3665
2016-01-22 15:06
浏览 40

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

I am retrieving data from MySql with PHP. Everything works fine but not with the radio buttons. What I would like to do is that as the text boxes values change, I would also like to change the value of the check box but leaving some check boxes values intact. Here are the codes:

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);
    }
});

图片转代码服务由CSDN问答提供 功能建议

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

HTML:

 &lt; select id =“userDropdown”&gt;&lt; / select&gt; 
 \  n&lt; label&gt;名称&lt; / label&gt; 
&lt; input type =“text”id =“name”/&gt; 
 
&lt; label&gt;电话&lt; / label&gt; 
&lt; input type =“text  “id =”phone“/&gt; 
 
 **&lt; p&gt; 
 M:&lt; input type =”radio“class =”flat“name =”gender“id =”gender“value =”M  “checked =”“required /&gt; 
 F:&lt; input type =”radio“class =”flat“name =”gender“id =”gender“value =”F“/&gt; 
&lt; / p&gt  ; ** 
   
 
 

Javascript

  // sql data ... 
var data = [
 { 用户名:'用户1',姓名:'Bill',电话:'123-456-789',性别:'男'},
 {用户名:'用户2',姓名:'John',电话:'123  -456-987',性别:'男性'},
 {用户名:'用户3',姓名:'玛丽',电话:'123-654-789',性别:'女性}} 
]; \  n 
var dropdown = $('#userDropdown'); 
dropdown.append('&lt; option value =“”&gt;选择用户&lt; /选项&gt;'); 
for(var i = 0; i&lt; data。 长度; i ++){
 var item = data [i]; 
 dropdown.appen  d('&lt; option value =“'+ item.username +'”&gt;'+ item.username +'&lt; / option&gt;'); 
} 
 
 $('#userDropdown')。  (function(){
 var user = this.value; 
 var dataItem = $ .grep(data,function(e){return e.username == user;  } 
; 
 
 if(dataItem.length&gt; 0){
 $('#phone')。val(dataItem [0] .phone); 
 $('#name')。val(dataItem  [0] .name); 
 $('#gender')。val(dataItem [0] .gender); 
} 
}); 
   
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • douzhuoxia0587 2016-01-22 15:26
    已采纳

    Get rid of the duplicate id and make it easy. HTML5 id specification 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);
    }
    

    You can see it work in this Fiddle

    已采纳该答案
    打赏 评论
  • dongyanpai2701 2016-01-22 15:21

    First you need to change your input radio values like this (with "male" and "female") to match with your sql data :

    <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>
    

    Then change this line :

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

    like this :

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

    or like this (since jQuery 1.6) :

    $("input[name=gender][value=" + dataItem[0].gender + "]").prop('checked', true);
    
    打赏 评论
  • dongzhuo1930 2016-01-22 15:32

    This is what I would do in your change function:

    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);
            }
        }
    });
    
    打赏 评论

相关推荐 更多相似问题