JQueryUI selectmenu - How to load options with append

Question

JQueryUI selectmenu - How to load options with append

Navigation

#1 by (-1 votes)

0

I hope you can help me with this: I was using select option to display a list of options without problems, but for a theme of functionality I decided to change it for a selectmenu, however I do not load anything in the select with the same procedure as it worked with the simple select option

my code is as follows:

for(x=0; x<cont; x++) {
  $('#proy-select').append('<option value="' + resp['Proyectos'][x]['desc'] + '">' + resp['Proyectos'][x]['id'] + '</option>');
}

I replaced it with this one, but still nothing is loaded in the select:

var options = [];

for(x=0; x<cont; x++) {
  options.push('<option value="' + resp['Proyectos'][x]['desc'] + '">' + resp['Proyectos'][x]['id'] + '</option>');
}

$('#proy-select').append(options.join("")).selectmenu();
$('#proy-select').selectmenu('enable');

Any help is appreciated

javascript html

asked by Mario Zanetta 26.11.2018 в 02:08

source

1 answer

Load templates dynamically REMOVE zeros from a number

score -1 · Answer 1

Here is a simple example of how you can load the options in Select . I did it with a for each, but quietly you can do it with a for. I hope it serves you, Regards!

let proyecto = [
  {'id': 1, 'desc': "item 1"},
  {'id': 2, 'desc': "item 2"},
  {'id': 3, 'desc': "item 3"},
  {'id': 4, 'desc': "item 4"}
];


$(function() {
    fillSelect();
    $( "#mySelect" ).selectmenu({
    select: function( event, ui ) {
     console.log(this.value);
   }
   });
});

function fillSelect()
{
  let select = $("#mySelect");
  $.each(proyecto, function( index, value ) {
    let id= proyecto[index].id;
    let desc= proyecto[index].desc;
    
    $("#mySelect").append("<option value='"+id+"'>"+desc+"</option>");
   
  });
  
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>




<select id="mySelect">
<option disabled selected>Seleccionar...</option>
</select>

Edited : Adapted for jQuery UI Selectmenu

You just have to add the following code to the page load.

$( "#mySelect" ).selectmenu({
    select: function( event, ui ) {
     console.log(this.value);
   }
   });