Question

我有一个ID select id="accTypeSel"的选择。从json文件jsonData.json中检索选项值。我想要做的是，我想显示在div id="display"中选择的分支。我曾在下面的语法中尝试过它，但它没有用。

var $branchDetail=$('#accTypeSel option:selected').attr('data.accList-branch');
var $value=$branchDetail.val();
$('#display').html($value);

从JSON.html中选择

<!DOCTYPE html>
<html>
<head>
    <script src="js/jquery-1.7.1.min.js"></script>
</head> 
<body>
    <table>
        <tr>
            <td>
                Acc Type
            </td>
            <td>
                <select id="accTypeSel"></select>
            </td>
        </tr>
    </table>
    <div id="display"></div>
    <script>
        $.ajax({
            type:"GET",
            datatype:"json",
            async:true,
            url:'ref/jsonData.json',
            success:function(data){
                 for (var i=0;i<data.accList.length;i++)
            {
                var $option=$('<option />');
                $option.attr('value',data.accList[i].code,data.accList[i].branch);
                $option.text(data.accList[i].code+" ("+data.accList[i].branch+")");
                $('#accTypeSel').append($option);
            }
                var $branchDetail=$('#accTypeSel option:selected').attr('data.accList-branch');
                var $value=$branchDetail.val();
                $('#display').html($value);



            }
        });
    </script>
</body>
</html>

jsonData.json

{
    "accList":[
        {
            "code":"1234",
            "branch":"Branch1"
        },
        {
            "code":"4321",
            "branch":"Branch2"
        },
        {
            "code":"1111",
            "branch":"Branch3"
        }
    ]
}

Answer 1

我认为以下代码可能是您想要的：

<script>
    $.ajax({
      type: "GET",
      datatype: "json",
      async: true,
      url: 'ref/jsonData.json',
      success: function(data) {
        for (var i = 0; i < data.accList.length; i++) {
          var $option = $('<option />');
          $option.attr('value', data.accList[i].code);
          $option.data('branch', data.accList[i].branch);
          $option.text(data.accList[i].code + " (" + data.accList[i].branch + ")");
          $('#accTypeSel').append($option);
        }

        $('#accTypeSel').on('change', function() {
          displayBranchDetail();
        })

        function displayBranchDetail() {
          var $branchDetail = $('#accTypeSel');
          var $value = $branchDetail.find(':selected').data('branch');
          $('#display').html($value);
        }
        displayBranchDetail();


      }
    });
  </script>

这是一个Plunker链接：http://plnkr.co/edit/BCEoxminr4JyCIQBfZua?p=preview

Answer 2

以下是获取“显示”的简单方法。值。我开始输入解决方案，但又分心了另一项工作。无论如何我发布它。我希望它会给你更多的想法。

＆＃13;

var ajaxResponse = '{'+
    '"accList":['+
        '{'+
            '"code":"1234",'+
            '"branch":"Branch1"'+
        '},'+
        '{'+
            '"code":"4321",'+
            '"branch":"Branch2"'+
        '},'+
        '{'+
            '"code":"1111",'+
            '"branch":"Branch3"'+
        '}'+
    ']'+
'}';

var jsonObj = JSON.parse(ajaxResponse);

var appendData = '';

$.each(jsonObj.accList, function(i, val){
        appendData += 
          '<option value='+val.code+' data-branch='+val.branch+'>' + 
          val.code + " (" + val.branch + ")" + '</option>';
  });

var accTypeSel = $('#accTypeSel');
accTypeSel.append(appendData);


accTypeSel.on('change', function(){
  $('#display').text(accTypeSel.find(':selected').data('branch'));
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
    <script src="js/jquery-1.7.1.min.js"></script>
</head> 
<body>
    <table>
        <tr>
            <td>
                Acc Type
            </td>
            <td>
                <select id="accTypeSel"></select>
            </td>
        </tr>
    </table>
    <div id="display"></div>
  </body>
  </html>

＆＃13;

如何从数据ID中检索值？

2 个答案: