Hello everyone,
Sorry, I did not post at the correct place...
I'm trying to use the new functionality "pqSelect", but I fail.
I get something like the picture attached.
1. The list is by default opened - I would like it close as your example/demo (
http://paramquery.com/select), open it only when we click on it.
2. There is a strange blue box (at the bottom of the list)
3. When I include this code in my form, the first click (in another input) gives the focus to this SELECT input... What I do not understand why ?
See below my simplified form :
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BioObs</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="<?php echo $cur_dir; ?>jquery/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $cur_dir; ?>jquery/pqselect.dev.css" />
<script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/jquery-1.11.1.js"></script>
<script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php echo $cur_dir; ?>jquery/pqselect.dev.js"></script>
<script type="text/javascript">
$(function() {
$("#id_condition").pqSelect({
multiplePlaceholder: 'Cliquer ici pour voir la liste',
deselect: true,
selectallText: 'Tout sélectionner',
checkbox: true,
search: false
}).on("change", function(evt){
var val = $(this).val();
console.log('Sélectionné : ' + val);
}).pqSelect( 'open' );
});
</script>
</head>
<body>
<form action="accueil.php" id="fvn" name="fvn" method="POST">
<section id="content" style="">
<div class="wrap-content">
<div id="box1" class="row box1" style="">
<input class="label" value="Conditions :" disabled="no" >
<select id="id_condition" class="saisie" style="display: inline-block;width:300px" multiple="multiple">
<option value="Normal"> Normal </option>
<option value="Faible houle"> Faible houle </option>
<option value="Forte houle"> Forte houle </option>
<option value="Vagues"> Vagues </option>
<option value="Courant faible"> Courant faible </option>
<option value="Courant fort"> Courant fort </option>
</select>
</div>
<div/>
</section>
</form>
</body>
</html>
What It wrong in my code ?
Is somebody have a simple example to compare/investigate between codes ?
Many thanks
Best regards
Laurent
