Change the value of a select fill dynamically from Javascript

Question

Change the value of a select fill dynamically from Javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a select that dynamically fill with data that I receive in a JSON, the user then chooses a value and continues using the application, I am trying to show that select again when I press a button I will appear with a predetermined option that is defined as "Choose board" but I can not change the selection from Javascript to show that option, I have this imlemented HTML:

 <div id="tablaSelect">
    <table id=tabla2 style="width:80%" >
    <tr>  
      <th>
        <div class="styled-select">
          <select class="select" id="boards">
          </select>
        </div>
     </th>
    </tr>
   </table>

Javascript to fill the select: // Mount the select with the boards

$('#boards')
            .append($("<option></option>")
            .attr("value",'')
            .text("Elegir un tablero")); 

        $.each(boards, function(index, value) {
            $('#boards')
                .append($("<option></option>")
                .attr("value",value.id)
                .text(value.name)); 
                arrayBoards.push(value.id);
        });

Javascript to change the select:

function cambiar(){
 document.getElementById("tablaSelect").style.display="block";
 document.getElementById("select").value = '0'; //No se hace así porque no tengo values
}

Any ideas on how to make the select with the "Choose board" option when executing the change function? thank you very much:)

javascript html select

asked by Silvia 11.06.2018 в 17:17

source

2 answers

0

For this you have to first put the id in the method to select elements you are putting select and the id is boards and then would do something like this document.getElementById("boards").selectedIndex = 0 ; but you also have to be clear where you call the function change because I do not see in your code when you call it if you want it to be by selecting an option in select you should do this <select class="select" onchange="cambiar();" id="boards"></select> but if you want to put it in a single button you have to call the function in the event onclick="cambiar();" I hope you solve the answer

answered by 12.06.2018 в 14:39

How to place .htacces in Ghost Save array in BD with laravel 5.5

score 1 · Accepted Answer

Add the attribute "selected" when filling the select

var arrayBoards = [];
     $('#boards')
        .append($("<option></option>")
        .attr({
            value: '',
            selected:"selected"})
        .text("Elegir un tablero")); 

    $.each(boards, function(index, value) {
        $('#boards')
            .append($("<option></option>")
            .attr("value",value.id)
            .text(value.name)); 
            arrayBoards.push(value.id);
    });
// -- Y en la funcion "cambiar" puedes trabajarlo con Jquery
function cambiar(){
  document.getElementById("tablaSelect").style.display="block";
  // CON JAVASCRIPT NATIVO
  document.getElementById("boards").selectedIndex = 0;
  // CON JQUERY
  // $("#boards").val($("#select option:first").val());
  // ó option:empty
  //  $("#boards").val($("#boards option:empty").val()); 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tablaSelect">
<table id=tabla2 style="width:80%" >
<tr>  
  <th>
  <div class="styled-select">
  <select class="select" id="boards">
  </select>
</div>
</th>
</tr>
</table>
</div>
<input type="button" onclick="cambiar()"/>