Filling a select list with a string or an object-CodePudding

this is my first post, i am a javascript newbie, and english is not my native language, so sorry if i my explanations are not as you expect.

So, i am trying to populate a select list with the result of an ajax database query. the query returns a string:

'[["Saphir","1","10"],["Serval","2","10"],["Sygma","3","10"],["Swan","4","10"]]'

My purpose is to use this result to populate a select list with e.g. for the first option: Saphir as the text, and "1" for the value.

Here is my last code, no error returned by the Chrome console. I have tried to adapt so many others found here and there, but i still didn't succeed yet. this code fills a list, but doesn't allow any selection.

enter image description here

#bfLabel410is the select list ID updated code with pilchard answer

function ff_sidefab_action(element, action) {
  switch (action) {
    case 'change':
      jQuery.ajax(
        {
          type: "POST",
          url: "/BMWK1census/ajaxsidemodelist.php",
          data: { code: ff_getElementByName('sidefab').value },
          success: function (data) {
            var obj = JSON.parse(data);
            console.log(obj);
            var result = [];
            var keys = Object.keys(obj);
            console.log(typeof keys)
            keys.forEach(function (key) { result.push(obj[key]); });
            jQuery('#bfLabel410').empty();
            jQuery('#bfLabel410').append(jQuery('<option value="">'   'Choisir une option'   '</option>' ));
    for (var i = 0; i < result.length; i  ) {
       console.log(result[i]);
       alert(result[i][0]);
       jQuery('#bfLabel410').append(jQuery('<option value="'   result[i][1]   '">'   result[i][0]   '</option>'));
    } 
            } // fin boucle for
          } // fin success
        } // fin params ajax
      ); // fin jQuery.ajax()
      break;
    default: ;
  } // fin switch
}

CodePudding user response：

jQuery('#bfLabel410').append(jQuery('<option value="">'   'Choisir une option'   '</option>' ));
for (var i = 0; i < result.length; i  ) {
   console.log(result[i]);
   alert(result[i][0]);
   jQuery('#bfLabel410').append(jQuery('<option value="'   result[i][1]   '">'   result[i][0]   '</option>'));
}

CodePudding user response：

thank you for your answer

I tried your code, but the result didn't change, a list without select possibilty

In the source code, the select tag is not created

I hardcoded a first option, and now a select option is available at the right side of the unselectable list enter image description here

i think i miss the select object reference for any reason

here is my new full code

function ff_sidefab_action(element,action)

{ switch(action){ case 'change': jQuery.ajax( {type:"POST", url:"/BMWK1census/ajaxsidemodelist.php", data:{code:ff_getElementByName('sidefab').value}, success:function(data){ var obj=JSON.parse(data); console.log(obj); var result=[]; var keys=Object.keys(obj); console.log(typeof keys) keys.forEach(function(key){result.push(obj[key]);}); jQuery('#bfLabel410').empty(); jQuery('#bfLabel410').append(jQuery('' 'Choisir une option' '' )); for(var i=0;i<result.length;i ){ console.log(result[i]); alert(result[i][0]); //jQuery('#bfLabel410').append(jQuery('',{value:resulti,text:result[i][0]})); jQuery('#bfLabel410').append(jQuery('' result[i][0] '')); } // fin boucle for } // fin success } // fin params ajax ); // fin jQuery.ajax() break; default:; } // fin switch }