【问题标题】:Setting radio group from json从 json 设置广播组
【发布时间】:2011-06-05 08:46:06
【问题描述】:

我有 2 个模式形式的无线电组。我很难弄清楚如何从 json 字符串中为每个组设置值。json 字符串中的最后 2 个值是“角色”和“活性”。激活是 1 表示是或 0 现在。管理员、员工或用户的角色为 1、2 或 3。我遍历 json 字符串并将值分配给字段名称,因为它们在 html 中都是相同的。

我的html是:

<div class="form-field bt-space10">
    <div class="clear">
    <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Authorization Role: </h4>
                                
    <div class="form-radio-item clear fl-space2">
        <input type="radio" rel="radiogroup" name="role" id="Admin" value="1" class="radio fl-space" /> <label for="Admin" class="fl">Admin</label>
    </div>
    
    <div class="form-radio-item clear fl-space2">
        <input type="radio" rel="radiogroup" name="role" id="Staff" value="2" class="radio fl-space" /> <label for="Staff" class="fl">Staff</label>
    </div>  
    
    <div class="form-radio-item clear fl-space2">
        <input type="radio" rel="radiogroup" name="role" id="User" value="3" class="radio fl-space" /> <label for="User" class="fl">User</label>
    </div>
    </div>
    <div class="clear">
    <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Account Activated: </h4>
                                
    <div class="form-radio-item clear fl-space2">
        <input type="radio" rel="radiogroup1" name="activated" id="Yes" class="radio fl-space" /> <label for="radio4" class="fl">Yes</label>
    </div>
    
    <div class="form-radio-item clear fl-space2">
        <input type="radio" rel="radiogroup1" name="activated" id="No" class="radio fl-space" /> <label for="radio5" class="fl">No</label>
    </div>  
    </div>  
        
</div><!-- /.form-field-->

我传入的 json 字符串(如果需要,我可以将返回更改为“Role”:“Admin”等。和“activated”:“Yes”等):

{"op": "UPDATE", "id": "7","email": "joe@public.com","name": "Joe Public","address": "123 Any Street","city": "AnyTown","zipcode": "12345","state": "PA","contact_name": "","phone": "8885551212","fax": "","company_branch": "","company_name": "","activated": "1","role": "1" }

我用来填充表单上其他字段的代码:

function editUser(rowID, callback) {
    var ret;
    jQuery.fancybox({
        modal : true,
        padding : 0,
        cache : false,
        overlayOpacity : 0.5,
        href : "userEdit.html",
        onComplete : function() {
            InitProfileMenu()
            var tsTimeStamp= new Date().getTime();
            $.getJSON("includes/GetUserDetails.php?tsTimeStamp&id=" + rowID,     
                function(data) {
                    $.each(data, function(i, item) {
                    $('#' + i).val(item);
                });
            })
            jQuery("#editUser_cancel").click(function() {
                ret = false;
                jQuery.fancybox.close();
            })
            jQuery("#editUser_ok").click(function() {
                jQuery.fancybox.close();
                ret = true;
            })
        },

我已经用谷歌搜索死了,但没有找到解决方案。谁有想法?或者他们可以指出我的资源,这将有助于解决这个问题?

【问题讨论】:

    标签: javascript jquery jquery-events getjson


    【解决方案1】:

    这很难以通用方式解决 JSON 字符串中的所有值,因为 html 属性彼此不同。我建议进行两项更改:

    1. 为无线电输入添加一个名为“激活”的值属性
    2. 对于 JSON 数据的每个元素:检查表单输入的类型,如果是单选,则使用名称和值属性选择器来检查是否正确。

       var myJsonData = {
          "op": "UPDATE",
           "id": "7",
          "email": "joe@public.com",
          "name": "Dennis Megarry",
          "address": "123 Any Street",
          "city": "AnyTown",
          "zipcode": "12345",
          "state": "PA",
          "contact_name": "",
          "phone": "8885551212",
          "fax": "",
          "company_branch": "",
          "company_name": "",
          "activated": "1",
          "role": "1"
      };
      
      function updateFormWithJson(dataObj) {
          $.each(dataObj,function(i,item){
              if($('input[name="' + i + '"]:first').attr("type") == "radio"){
                  $('input[name="' + i + '"][value="' + item + '"]').attr("checked","checked");
              }
          });
      };
      
      $(document).ready(function() {
          updateFormWithJson(myJsonData);
      });
      
      <div class="form-field bt-space10">
          <div class="clear">
          <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Authorization Role: </h4>
      
          <div class="form-radio-item clear fl-space2">
              <input type="radio" rel="radiogroup" name="role" id="Admin" value="1" class="radio fl-space" /> <label for="Admin" class="fl">Admin</label>
          </div>
      
          <div class="form-radio-item clear fl-space2">
              <input type="radio" rel="radiogroup" name="role" id="Staff" value="2" class="radio fl-space" /> <label for="Staff" class="fl">Staff</label>
          </div>  
      
          <div class="form-radio-item clear fl-space2">
              <input type="radio" rel="radiogroup" name="role" id="User" value="3" class="radio fl-space" /> <label for="User" class="fl">User</label>
          </div>
          </div>
          <div class="clear">
          <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Account Activated: </h4>
      
          <div class="form-radio-item clear fl-space2">
              <input type="radio" rel="radiogroup1" name="activated" id="Yes" value="1" class="radio fl-space" /> <label for="radio4" class="fl">Yes</label>
          </div>
      
          <div class="form-radio-item clear fl-space2">
              <input type="radio" rel="radiogroup1" name="activated" id="No" value="0" class="radio fl-space" /> <label for="radio5" class="fl">No</label>
          </div>  
      </div>  
      

    【讨论】:

    • 效果很好!我试图在相同的功能中执行此操作,但看起来我走错了方向..再次..哈哈谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-25
    • 2017-07-17
    • 2018-07-29
    • 1970-01-01
    相关资源
    最近更新 更多