0

I have a dynamically generated select tag and then after that, I have to make an ajax call to query some values and loop thru it and dynamically generate the options tag. But for some reason, I cant append an option tag to my select tag. This is not the issue of asynchronicity right?

const firstElemTd = $('#none td:first-child');

firstElemTd.append(`<select id="the-select"></select>`);

const selectTag = $(`#the-select`);

$.ajax({
      method: 'GET',
      url: url,
      dataType: 'json',
      success: function(response) {
        $.each(response, function(key, balyu) {
          selectTag.append($('<option>', {value: balyu.name}).text(balyu.name));
        });
      }
    });
aRtoo
  • 1,686
  • 2
  • 18
  • 38
  • If you check console are you getting any errors? What does your response object look like? – scrappedcola Aug 16 '19 at 17:36
  • no. there's no errors that whats buggin me. – aRtoo Aug 16 '19 at 17:38
  • Have you inspected `firstElmTd` to see what it actually is? Do you see your select tag added properly? And definitely check your response object. – scrappedcola Aug 16 '19 at 17:44
  • @scrappedcola yep. I fixed it by just putting the select tag on the html instead of creating it dynamically. but the id and name should be dynamic so I just added the id and name attr on the fly – aRtoo Aug 16 '19 at 17:47

2 Answers2

2

Create the selectTag as a jQuery object first. You can then append to it.

$(function(){
    const $firstElemTd = $('#none td:first-child');
    const $selectTag = $('<select></select>');
    //append the selectTag to the td
    $firstElemTd.append($selectTag);
    //now that the selectTag is a distinct jQuery object you can append to it. EG:
    var response = [{"name":"a"},{"name":"b"},{"name":"c"}];
    $.each(response, function(key, balyu) {
      $selectTag.append($('<option/>').val(balyu.name).text(balyu.name));
    });

/* The same thing in the ajax response should work too.
(commented out here for the snippet)
    $.ajax({
      method: 'GET',
      url: url,
      dataType: 'json',
      success: function(response) {
        $.each(response, function(key, balyu) {
          $selectTag.append($('<option/>').val(balyu.name).text(balyu.name));
        });
      }
    });
   */ 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="none"><tr><td></td></table>
Moob
  • 14,420
  • 1
  • 34
  • 47
  • 1
    holy crap this works. thank you. I didn't know that you need to create the tag first before appending. I thought It will do that automagically. lols. thanks – aRtoo Aug 16 '19 at 18:34
1

You're constructing your $.each incorrectly

$.ajax({
  method: 'GET',
  url: url,
  dataType: 'json',
  success: function(response) {
     $.each(response, function(key, balyu) {
        selectTag.append($('<option></option>', 
              {value: balyu.name, 
               text: balyu.name}
        ));
     });
  }
});

You could also go with another approach:

$.ajax({
    method: 'GET',
    url: url,
    dataType: 'json',
    success: function(response) {
        $.each(response, function(key, balyu) {        
            selectTag.append($('<option></option>'
                .val(balyu.name)
                .text(balyu.name));
        });
    }
});

Either way will give you what you're looking for.

Adam J
  • 506
  • 3
  • 17
  • are you talking about `text` method? I got it from here. [link](https://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-as-a-js-object-with-jquery) – aRtoo Aug 16 '19 at 17:28
  • You grabbed the question, not the actual answer. Look at the answer right below that, there's a third option that I haven't given. – Adam J Aug 16 '19 at 17:31
  • Your second approach needs a closing `>` on your option tag. – scrappedcola Aug 16 '19 at 17:33
  • Thanks @scrappedcola. Fixed. – Adam J Aug 16 '19 at 17:34
  • 1
    Don't you need a closing parenthesis? eg: `selectTag.append($('')` – Moob Aug 16 '19 at 17:35
  • it's a derived answer from the actual answer. he said This is a cleaned up and simplified version of [matdumsa's](https://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-as-a-js-object-with-jquery/171007#171007): – aRtoo Aug 16 '19 at 17:43
  • @Moob - Yes, that's correct. I'll update. Sorry, copied and pasted from OP and didn't fix. LOL – Adam J Aug 16 '19 at 17:43
  • @aRtoo - Feel free to try either solution, and see if they work for you. If not, let me know what's failing. – Adam J Aug 16 '19 at 17:45
  • I think you cant append on a dynamically generated tag. because I've set the select directly on the HTML and then have the same method on to generate options. – aRtoo Aug 16 '19 at 17:46
  • Create a fiddle with your code, and then we can modify from there. – Adam J Aug 16 '19 at 17:46
  • its all cool. thanks though. I think you cant just append on JS generated tag. – aRtoo Aug 16 '19 at 17:48