CODEWITHSUNDEEP
javascriptjqueryselect
sgm
sgm

Reputation: 103

Change select value Javascript

I have a select that filled with JSON data dynamically with the following data: Element, 1, 2, 3 ... once selected, the select is hidden since a button is shown again, but I can not show it with the Element value, it is shown with the value that the user chose, how could I change the value of the select from Javascript? 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 Select:

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

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

Javascript to change

function cambiar(){
     document.getElementById("tablaSelect").style.display="block";
     document.getElementById("select").value = '';
}

Upvotes: 0

Views: 78

Answers (2)

patilprashant6792
patilprashant6792

Reputation: 353

Yes You can change the value of dropdown dynamically like this

function cambiar(){
     document.getElementById("tablaSelect").style.display="block";
     $("#boards").val(Any value here);
}

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074285

Your document.getElementById("select").value = ''; would work if there's an option with that value (and looking at your code, there is), but the id of the element is boards, not select:

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

var boards = [
  {id: 1, name: "One"},
  {id: 2, name: "Two"},
  {id: 3, name: "Three"},
  {id: 4, name: "Four"}
];
var arrayBoards = [];

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

function cambiar(value){
     document.getElementById("tablaSelect").style.display="block";
     document.getElementById("boards").value = value;
}

cambiar("1");
setTimeout(function() {
  cambiar("");
}, 800);
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Or, since you're using jQuery, use its val: $("#boards").val("");

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

var boards = [
  {id: 1, name: "One"},
  {id: 2, name: "Two"},
  {id: 3, name: "Three"},
  {id: 4, name: "Four"}
];
var arrayBoards = [];

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

function cambiar(value){
     document.getElementById("tablaSelect").style.display="block";
     $("#boards").val(value);
}

cambiar("1");
setTimeout(function() {
  cambiar("");
}, 800);
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Related Questions