title: Getting the custom attribute from the selection and store in a variab;e
body: <p>Currently, I am getting the selection from the json data. What I want to do is, I want to save the <code>branch</code> selected attribute in a variable and display it in <code>div id="display"</code>. How can I do that? The variable name is <code>valueSelected</code>. Thanks</p>
  
  <p>Selection.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Acc Type
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select id="accTypeSel"&gt;&lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div id="display"&gt;&lt;/div&gt;
  &lt;script&gt;
      $.ajax({
          type:"GET",
          datatype:"json",
          async:true,
          url:'ref/jsonData.json',
          success:function(data){
              for (var i=0;i&lt;data.accList.length;i++)
              {
                  var $option=$('&lt;option /&gt;');
                  $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 valueSelected=$("#accTypeSel.accList.branch option:selected").val();
                  $('#display').append(valueSelected);
  
              }
  
  
  
          }
      });
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>JsonData.json</p>
  
  <pre><code>{
  "accList":[
      {
          "code":"1234",
          "branch":"Branch1"
      },
      {
          "code":"4321",
          "branch":"Branch2"
      },
      {
          "code":"1111",
          "branch":"Branch3"
      }
  ]
  }
  </code></pre>