CODEWITHSUNDEEP
javascriptjqueryhtmlcss
niz_sh
niz_sh

Reputation: 505

How to use jQuery Template to select option?

I'm working with form that contain select element. I need to fill select with the data coming via json format. How to use jquery template to fill the select element?

I read about jquery template, it's documentation. But still can't get right result.

2 question: Is it good way to use jQuery Template for big data, for example: 4000 columns? 

<div class="col-lg-5">
    <select id="sel"></select>
</div>
<script id="optionTmpl" type="text/x-jquery-tmpl">
            {{each $options}}
                <option value="${$code}">${$title}</option>
            {{/each}}
</script>

    var options = [
    { code: "1", title: "A" },
    { code: "2", title: "B" },
    { code: "3", title: "C" },
    { code: "4", title: "D" },
    { code: "5", title: "E" },
    ];
    $('#optionTmpl').tmpl(options).appendTo('#sel');

Upvotes: 0

Views: 1635

Answers (3)

Lasithds
Lasithds

Reputation: 2291

Variables in template are defined incorrectly

${$code} should be ${code}

You can use the following method instead of a for loop as explained in the plugin

$(document).ready(function() {
  var options = [
    { code: "1", title: "A" },
    { code: "2", title: "B" },
    { code: "3", title: "C" },
    { code: "4", title: "D" },
    { code: "5", title: "E" },
  ];

  var markup = '<option value="${code}">${title}</option>';

  // Compile the markup as a named template
  $.template( "optionsTemplate", markup );

  // Render the template with the options data and insert
  // the rendered HTML under the "sel" element
  $.tmpl("optionsTemplate", options ).appendTo("#sel");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div class="col-lg-5">
    <select id="sel"></select>
</div>

Upvotes: 1

Rakesh
Rakesh

Reputation: 505

If your json format is fixed from server side then you can try this. 

var options = [
{ code: "1", title: "A" },
{ code: "2", title: "B" },
{ code: "3", title: "C" },
{ code: "4", title: "D" },
{ code: "5", title: "E" },
];
$.each(options , function(i, obj){
   $('#select').append($('<option>').text(obj.title).attr('value', obj.code));
});

we can also append the json to the input type select field if the key and value are same like this.

Reference : https://jocapc.github.io/jquery-view-engine/ 

 var options = [ "A" ,"B" ,"C" ,"D"];
          $('#myselect').view(json);

Upvotes: 1

Manish Khedekar
Manish Khedekar

Reputation: 402

You may have a little change in the code as follows,

    var options = [
    { code: "1", title: "A" },
    { code: "2", title: "B" },
    { code: "3", title: "C" },
    { code: "4", title: "D" },
    { code: "5", title: "E" },
    ];
    $('#optionTmpl').tmpl(options).appendTo('#sel');
<!-- These are added to execute the code -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
    
<div class="col-lg-5">
    <select id="sel"></select>
</div>

<!--
These was your code,

<script id="optionTmpl" type="text/x-jquery-tmpl">
  {{each $options}}
    <option value="${$code}">${$title}</option>
  {{/each}}
</script>

which is changed to =>
-->

<script id="optionTmpl" type="text/x-jquery-tmpl">
    <option value="${code}">${title}</option>
</script>

Upvotes: 1

Related Questions