Carlin Modèles - Comment marquer option dans la liste Déroulante sélectionnée

J'ai un Carlin modèle qui utilise Bootstrap 4 comme la "mise en page" et la réception de données à partir d'un Express/Mangouste serveur.

Je suis le remplissage d'un formulaire à partir de MongoDB, de sorte que le contenu peut être modifié. J'ai été la recherche de moyens pour faire une liste déroulante liste sélectionner une option en fonction de la valeur de mongoDB document.

J'ai vu des moyens d'établissement de la liste déroulante liste à partir de zéro et réglage d'une option "selected", mais la forme est déjà produit et a une liste déroulante liste déjà en place. J'ai juste besoin de faire correspondre l'option avec la valeur de mongoDB document et définissez l'option afficher dans la liste.

Le Carlin modèle est comme suit:

.row
  .col-sm-6
    .form-group
      label.control-label.requiredField(for='propertyType')
        | Property Type
        span.asteriskField *
      .col-xs-12
        select#propertyType.select.form-control.input-lg(form='addProperty', name='propertyType')
          option(value='0') -- Select --
          option(value='6') Home
          option(value='7') Condo
          option(value='10') Single Family Home
          option(value='11') Town House
          option(value='12') City Apartment
          option(value='13') Villa


script.
  var propertyType = document.getElementById('propertyType');

  for (var i = 0; i < propertyType.options.length; i++) {

    if (propertyType.options[i].value = #{property.typeId}) {
        propertyType.options[i].selected = 'selected';
        propertyType.selectedIndex = i;
        break;
    }

  }

Si je respecte le code de la liste, l'option réelle qui obtient une nouvelle valeur est le premier '-- Select --' qui a sa valeur a changé de '0' à '6', qui est la valeur de MongoDB document.

Si je change le javascript pour transmettre la valeur #{propriété.TypeId} à la "selectedIndex" comme ceci:

propertyType.selectedIndex = #{property.typeId};

Alors la valeur de l'indice de change et le "selected" les changements d'option à '6', mais cette sélectionne ensuite la 6ème option des options et non pas celui avec la valeur de '6'.

Menus déroulants sont la seule chose que je n'arrive pas à remplir de sorte que toute aide serait grandement appréciée.

OriginalL'auteur Pandafinity | 2016-10-12

pug

14

Si vous avez juste besoin de montrer une option de pré-sélectionné, puis je ne pense pas que vous avez besoin d'utiliser le javascript pour cela. Vous pouvez essayer ceci:
```
.row
  .col-sm-6
    .form-group
      label.control-label.requiredField(for='propertyType')
        | Property Type
        span.asteriskField *
      .col-xs-12
        select#propertyType.select.form-control.input-lg(form='addProperty', name='propertyType')
          option(value='0', selected= true) -- Select --
          option(value='6', selected= property.id == 6) Home
          option(value='7', selected= property.id == 7) Condo
          option(value='10', selected= property.id == 10) Single Family Home
          option(value='11', selected= property.id == 11) Town House
          option(value='12', selected= property.id == 12) City Apartment
          option(value='13', selected= property.id == 13) Villa
```
En supposant que cette liste déroulante affiche les valeurs correspondant à property.id, elle marquera le selected attribut aussi vrai pour les option dont la valeur correspond à la valeur dans property.id. Sinon, la première option sera affichée sélectionnée par défaut.

Mais, si vous avez 30 options (beaucoup je sais), vous devez écrire beaucoup de code. Il semble qu'il permettrait d'augmenter la mise à jour de votre base de code.
Oui il faudrait une grande quantité de code mis à jour. Mais vous pouvez utiliser une boucle pour parcourir les différentes options et de mettre à la condition sélectionnée à l'intérieur de cette boucle. Pourvu que cela soit possible dans votre cas.
Je suis désolé, Mohit, mais je vois cela comme une solution inefficace. Surtout si vous avez d'autres flux de travail qui utilisent des identifiants différents pour faire quelque chose d'applicable à être "sélectionné". Dire si vous avez une dynamique d'ensemble de données qui ont des groupes que l'utilisation de différents sélecteurs de définir la valeur par défaut? Vous devez ajouter plus de code pour définir entre ces sélecteurs... Merci bien.
...sur une note de côté, je l'ai fait essayer votre solution, juste pour voir, et ça ne fonctionne pas..
Je pense que j'ai été effectivement obtenir quelque chose de mal. C'est encore de me donner 'selected=""' mais ça fonctionne maintenant. Merci pour votre aide.

OriginalL'auteur Mohit Bhardwaj

J'ai utilisé Mohit Bhardwaj réponse dans une boucle for pour une solution simple.

select(name='image')
  option(value='' selected=!project.image) (empty)
  for img in images
    option(value=img.id selected=(img.id === project.image.id)) #{img.alt}

OriginalL'auteur sshow

3

Mise à JOUR

Espère que c'est ok pour répondre à ma propre question. Je l'ai fait essayer Mohit de l'approche, mais il ne fonctionne pas pour moi.

J'ai ajouté un 'script." l'article sous chaque <select> d'entrée:
```
script.
  var pOptions = document.getElementById('propertyType').options;
  for (i=0; i < pOptions.length; i++) {
    if (pOptions[i].value == #{property.typeId}) pOptions[i].selected = true;
  }
```
Oui, il est parfaitement bien pour répondre à votre propre question. C'est un Q&Un site, et chaque Q mérite un par Un!

OriginalL'auteur Pandafinity
0

Voici une manière de le faire sans exiger une balise de script ou de dérouler la boucle à tous.
```
-var selected = true;
select(id=field.id required=required)
    each op in field.options
        option(value=op name=field.name selected=selected) #{op}
        -if(selected){
            -selected=false;
        - }
```
Cela sera la première option dans la liste pour "sélectionné" en utilisant l'attribut définissant la syntaxe (si selected est vrai lors de l'évaluation selected=selected, il va ajouter la balise).

OriginalL'auteur Mark B

              here is index.pug
              /////////////////////  

           extends layout


           block content
           h1= title
           //- p Welcome to #{title}
         style.
         input[type=text], select {
         width: 20%;
         padding: 12px 20px;
         margin: 8px 0;
         display: inline-block;
         border: 1px solid #ccc;
         border-radius: 4px;
         box-sizing: border-box;
          }
       input[type=submit] {
       width: 10%;
       background-color: #4CAF50;
       color: white;
       padding: 14px 20px;
       margin: 8px 0;
       border: none;
       border-radius: 4px;
       cursor: pointer;
        }
       input[type=submit]:hover {
       background-color: #45a049;
       }
     div {
      border-radius: 1px;
      background-color: #f2f2f2;
      padding: 20px; }
     link(rel='stylesheet', href='/scripts/css/bootstrap.css')
     script(src="/scripts/js/bootstrap.min.js")
     //-      //- 

       script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js")
       script(src="/jquery/jquery.js")
       h3 Choose Your Skill
       - var  optos = skills
 div
    form(action='/Skill' method="post")
 div
    label Enter- 
    input(type='text',id='zaftot',name="zaftot" ,onKeyup="myFunc(this.value)"         
    autofocus="autofocus") 
    input(type='submit',  value='Submit')  
 div   

    select(name='dropdown' id="myselect" size="4" ,onClick="myclick()",style="margin- 
    left:40px" )


    script.
          function myclick(){ 
          var t=$("#myselect").val().toString();
          $("#zaftot").val(t);
          $("#zaftot").focus();
          $("#myselect").hide();
        ///alert(t);
         };
     function memo(){ 
       ///remove  all items of list
        var x = document.getElementById("myselect");
        while(true){ 
        if (x.length > 0) {
          x.remove(x.length-1);
               }
               else{
                 break;
               }
             }
          }

     function myFunc(inp){
        $("#myselect").show();

          memo(); //clear list before initiatig new one
       if (inp.length >0){
        //alert(inp +'----hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh');
        var aa =!{JSON.stringify(optos)}
        var uu =inp.trim().toLowerCase();
         for (i = 0; i < aa.length; i++) {
          var  tt =aa[i].trim().toLowerCase();
          //var y =tt.substr(0,uu.length);
          //alert(uu);
          //if(tt.substr(0,uu.length))===uu {  //substr() not working i dont know
            if(tt.indexOf(uu)>-1){ 
              $('#myselect').append('<option>' + aa[i] + '</option>');
            };
         };
     };
    };
     ////////////////////////////////////////////////////

          here is  routes /index.js  
          /////////////////////////////

        /*esversion=6 */
        var express = require('express');
        var router = express.Router();

       router.get("/", function (req, res) {
        var  skills =["MVC", "C#", "mmm","mlll","moo","muuu" 
        ,"mdd","mkkkk","Node  
        JS", 
       "mkyy" ,  "Python" ,  "IDE visual studio","Mssql"];
        res.render('index', {
          title : "Select technology",
         skills:skills
        });
       });

     router.post("/Skill" , function(req, res){
     console.log(req.body);
     res.render('Skill',{
     skill: req.body.dropdown
     });
     });

    module.exports = router;
        //////////////////////////////////////
           package json
          {
         "name": "aziz",
            "version": "0.0.0",
            "private": true,
          "scripts": {
           "start": "nodemon ./bin/www"
         },
         "dependencies": {
         "bootstrap": "^4.1.3",
         "cookie-parser": "~1.4.3",
         "debug": "~2.6.9",
        "eslint": "^5.5.0",
         "express": "~4.16.0",
         "http-errors": "~1.6.2",
        "jquery": "^3.3.1",
        "morgan": "~1.9.0",
        "nodemon": "^1.18.4",
         "popper.js": "^1.14.3",
         "pug": "2.0.0-beta11"
        },
      "author": "azizsallam",
       "license": "ISC"
        }     
        ///////////////////////////
         add these two line to app.js

 ////////////ADD TO APP.JS the next line how to call bootstrap files in yuor          
            /////////////////// the next line how to call bootstrap files 
 in yuor view ///////////////////
 app.use('/scripts', express.static(__dirname + 
 '/node_modules/bootstrap/dist/'));
 app.use('/jquery', express.static(__dirname + 
 '/node_modules/jquery/dist/'));
   //////////////////////////////////

EXEMPLE de TRAVAIL AVEC NŒUD et de l'EXPRIMER et de roquet moteur de template modifié à partir d'un autre poste sur pile de flux-POSTÉ le 19 MAI 2018 CHEN V chen.about-powershell.com/2018/05/...
C'est très large
S'il vous plaît ajouter explication de votre réponse
utiliser express générateur de construire votre application dans le dossier et lancer json paquet ,
M. Saeed ---j'ai JUSTE AJOUTÉ le PACKAGE.JSON trop

OriginalL'auteur aziz sallam

0

Regardant la documentation ici j'ai trouvé une solution qui ne nécessite pas de javascript et fonctionne en ligne.

C'est la façon dont je l'ai utilisé dans mon code:
```
select(name="priority")
    each priority in priorities
        option(value=priority.id selected=(job.priority.id == priority.id) ) #{priority.name}
```
OriginalL'auteur K Rob

Vous devez vous connecter pour publier un commentaire.