Modèles de carlin - Comment marquer une option dans la liste déroulante comme sélectionnée
J'ai un modèle Pug qui utilise Bootstrap 4 comme "mise en page" et qui reçoit des données d'un serveur Express/Mongoose.
Je remplis un formulaire à partir de MongoDB afin que le contenu puisse être modifié. Je cherchais un moyen de créer une liste déroulante en sélectionnant une option en fonction de la valeur du document mongoDB.
J'ai vu des moyens de construire la liste déroulante à partir de zéro et de définir une option sur 'sélectionnée', mais le formulaire est déjà généré et une liste déroulante est déjà en place. J'ai juste besoin de faire correspondre l'option avec la valeur du document mongoDB et de définir l'option à afficher dans la liste.
Le modèle Pug 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 conserve le code tel qu'il est répertorié, l'option qui donne une nouvelle valeur est la première '- Select -' dont la valeur est modifiée de '0' à '6', qui correspond à la valeur du document MongoDB.
Si je change le javascript pour passer la valeur # {property.TypeId} au 'selectedIndex' comme ceci:
propertyType.selectedIndex = #{property.typeId};
Ensuite, la valeur de l'index change et l'option "sélectionné" change - en "6", ce qui sélectionne ensuite la 6ème option des options et non celle ayant la valeur "6".
Les listes déroulantes étant la seule chose que je n'arrive pas à peupler, toute aide serait grandement appréciée.
METTRE &AGRAVE; JOUR
J'espère que ça va pour répondre à ma propre question. J'ai essayé l'approche de Mohit, mais cela n'a pas fonctionné pour moi.
J'ai ajouté un "script". section sous chaque <select> 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;
}
Si vous avez juste besoin d'afficher une option présélectionnée, alors je ne pense pas que vous ayez besoin d'utiliser 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 marque l'attribut selected comme étant vrai pour la variable option dont la valeur correspond à la valeur dans property.id. Sinon, la première option sera affichée sélectionnée par défaut.
J'ai utilisé la réponse de Mohit Bhardwaj 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}
Voici un moyen de le faire sans requérir de balise de script ni déployer la boucle.
-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 définira la toute première option de la liste sur "sélectionné" en utilisant la syntaxe de définition d'attribut (si selected est vrai lorsque évalué selected=selected, il ajoutera la balise).
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/'));
//////////////////////////////////
En regardant la documentation ici j'ai trouvé une solution qui ne nécessite pas de javascript et qui fonctionne en ligne.
Voici comment 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}