How can I auto select a select with javascript or jquery

Navigation
2

Hi, I would like the first value of a select to be self-selected. As you will see, my code is the following, I do not know what I am doing wrong.

the HTML 

<div class="row" style="display:block; margin-top:-95px" ng-controller="lista_claves">
    <center>
        <div class="col-xs-12">
            <div class="box  box-solid collapsed-box " id="oficinas" ng-repeat="item in claves">

                <div  class="box-header" data-widget="collapse" >

                    <img class="lupa" src="css/galeria/zoom.png" style="float:left; width:14px;height:18px; margin-left:2%;margin-top: 3%;" />

                    <h2 class="box-title" display="block" style="float:left; margin-left:2%;"> {{item.documentos}} </h2>
                    <img class="change" src="css/galeria/down.png" style="float:right; width:7%;margin-right: 5%; margin-top: 4%;" />

                    <p id="typee" value="{{item.descripcion}}"></p>
                    <div class="box-tools pull-right">


                    </div>
                </div>
                <div class="box-body" id="uniq" ng-controller="detalle_referenciacontrol">
                    <!--aqui estaba el filtro

                        --><select id="set" name="show-filter" ng-model="searchinput" >
                        <option id="plunkr" selected="selected" value="{{item.descripcion}}"></option>
                    </select>
                    <input type="text" id="twit" ng-model="searchinput" readonly  value="{{item.descripcion}}" placeholder="{{item.descripcion}}" cloack />                     
                    <center>

                        <table class="table table-hover" style="margin:auto">
                            <tbody>
                                <tr ng-repeat="item in itemsarchivo | filter:{tipodescrip:searchinput}" id="{{item.path}}" onclick="ver(this)">
                                    <td><b style="float:left;">{{item.nombre}}</b><img src="css/galeria/doc.png" style="float:right"></td>
                                </tr>
                            </tbody>
                        </table>
                    </center>
                </div>
                </div>
        </div>
    </center>
</div>

The code with which I try to self-select 

<script>
      $(document).ready  (
      function dialog_submit(val) {
          document.getElementById('twit').value = val;

          $("#uniq select").each(function () {

              $("#set").val = val;

          });
      }
      );
</script>

the items I post in the select are the following 

$scope.claves =  [
        {
            "documentos": "Sin clasificar (1)",
            "clave": "0",
            "descripcion": "Sin clasificar"
        },
        {
            "documentos": "Pedimento Aduanal (3)",
            "clave": "2",
            "descripcion": "Pedimento Aduanal"
        },
        {
            "documentos": "Facturas de Gastos (A cuenta de Terceros) (4)",
            "clave": "3",
            "descripcion": "Facturas de Gastos (A cuenta de Terceros)"
        },
        {
            "documentos": "Cuentas de Gastos MOZ (2)",
            "clave": "4",
            "descripcion": "Cuentas de Gastos MOZ"
        },
        {
            "documentos": "COVE (4)",
            "clave": "5",
            "descripcion": "COVE"
        },
        {
            "documentos": "Facturas de Mercancías (Compra de Mercancias) (1)",
            "clave": "6",
            "descripcion": "Facturas de Mercancías (Compra de Mercancias)"
        },
        {
            "documentos": "Guía aérea, conocimiento de embarque o carta de porte (1)",
            "clave": "25",
            "descripcion": "Guía aérea, conocimiento de embarque o carta de porte"
        }
    ]
    
asked by emanuelle 31.07.2018 в 21:13
source

3 answers

2

What you can do is create a new variable and assign the first item of array of objetos , you must also create a new <option> as you see below, any questions remain pending. 

var app = angular.module("myApp", []);
 
app.controller("myCtrl", function ($scope, $http) {

    $scope.claves =  [
        {
            "documentos": "Sin clasificar (1)",
            "clave": "0",
            "descripcion": "Sin clasificar"
        },
        {
            "documentos": "Pedimento Aduanal (3)",
            "clave": "2",
            "descripcion": "Pedimento Aduanal"
        },
        {
            "documentos": "Facturas de Gastos (A cuenta de Terceros) (4)",
            "clave": "3",
            "descripcion": "Facturas de Gastos (A cuenta de Terceros)"
        },
        {
            "documentos": "Cuentas de Gastos MOZ (2)",
            "clave": "4",
            "descripcion": "Cuentas de Gastos MOZ"
        },
        {
            "documentos": "COVE (4)",
            "clave": "5",
            "descripcion": "COVE"
        },
        {
            "documentos": "Facturas de Mercancías (Compra de Mercancias) (1)",
            "clave": "6",
            "descripcion": "Facturas de Mercancías (Compra de Mercancias)"
        },
        {
            "documentos": "Guía aérea, conocimiento de embarque o carta de porte (1)",
            "clave": "25",
            "descripcion": "Guía aérea, conocimiento de embarque o carta de porte"
        }
    ]

    $scope.firstItem = $scope.claves[0];
    

 });
  
<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    
<body ng-app="myApp" ng-controller="myCtrl">
    <select id="set" name="show-filter" ng-model="searchinput">
        <option id="firstItem" ng-value="" selected ng-bind="firstItem.descripcion"></option>
        <option id="plunkr" ng-value="item.descripcion">Segundo Item</option>
    </select>
    <input type="text" id="twit" ng-model="searchinput" readonly  value="{{item.descripcion}}" placeholder="{{item.descripcion}}" cloack />                     
    <center>

        <table class="table table-hover" style="margin:auto">
            <tbody>
                <tr ng-repeat="item in itemsarchivo | filter:{tipodescrip:searchinput}" id="{{item.path}}" onclick="ver(this)">
                    <td><b style="float:left;">{{item.nombre}}</b><img src="css/galeria/doc.png" style="float:right"></td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
</html>
    
answered by 31.07.2018 / 21:52
source
0

The truth is not understood what you want to do in javascript, likewise I'll explain how to access the options of any select (which is already rendered on screen).

assuming this is my select: 

 <select id='myId'>
    <option> 1</option>
    <option> 2</option>
    <option> 3</option>
    <option> 4</option>
</select>

The options are child elements of the select so that the only thing that has to be done to select an option is to set the selected parameter to true in any of these options like this: 

<script type="text/javascript">
    function(){
        var select=document.getElementById('myId');
        select.children[0].selected=true;
        //select.options[0].selected=true;
       //cualquiera de las dos funciona tanto children como options
    }
</script>

Then to automatically select the first option of your select, it should only be done: 

     $(document).ready(()=>{
        var select=document.getElementById('#set');
        select.children[0].selected=true;
     });

From here to below is something that I think may be affecting.

As you are using some framework to draw the options, I do not know what it is (angular, vue, react ...) no script can be executed as you expect on that select for a reason and that $(document).ready does not assure us that the select already has the options inside. If that is the case you should throw an error in console ...

If the above happens there are many solutions and one of them could be a setTimeout that gives the browser enough time to render the options. 

 $(document).ready(()=>{
        setTimeout(()=>{
            var select=document.getElementById('#set');
            select.children[0].selected=true;
         },1000);
     });

Maybe your code is good and this is the last (you only have to put the code inside the setTimeout or a setInterval that validates if select already has more than one option). I put it in pure javascript because in this case I do not need to use jquery.

    
answered by 31.07.2018 в 22:15
0

Since you are using angle, you can use the ng-init directive to assign a value to the searchinput model. In this case, you must assign the object to it as shown in the example that I have attached to you. 

ng-init="searchinput = claves[0]"

I have also added the ng-options directive to populate the options that should be shown in the select. 

var app = angular.module('exampleApp', []);
app.controller('exampleController', function($scope) {

  $scope.claves =  [
          {
              "documentos": "Sin clasificar (1)",
              "clave": "0",
              "descripcion": "Sin clasificar"
          },
          {
              "documentos": "Pedimento Aduanal (3)",
              "clave": "2",
              "descripcion": "Pedimento Aduanal"
          },
          {
              "documentos": "Facturas de Gastos (A cuenta de Terceros) (4)",
              "clave": "3",
              "descripcion": "Facturas de Gastos (A cuenta de Terceros)"
          },
          {
              "documentos": "Cuentas de Gastos MOZ (2)",
              "clave": "4",
              "descripcion": "Cuentas de Gastos MOZ"
          },
          {
              "documentos": "COVE (4)",
              "clave": "5",
              "descripcion": "COVE"
          },
          {
              "documentos": "Facturas de Mercancías (Compra de Mercancias) (1)",
              "clave": "6",
              "descripcion": "Facturas de Mercancías (Compra de Mercancias)"
          },
          {
              "documentos": "Guía aérea, conocimiento de embarque o carta de porte (1)",
              "clave": "25",
              "descripcion": "Guía aérea, conocimiento de embarque o carta de porte"
          }
      ];
    
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="exampleApp" ng-controller="exampleController">
  <select id="set" name="show-filter" ng-init="searchinput = claves[0]" ng-model="searchinput" ng-options="item as item.descripcion for item in claves track by item.clave">
  </select>
</div>
    
answered by 31.07.2018 в 23:06
Get moving data from input type="range" How exactly does '$ .ajax ({type, post, data})' work in this connection?