Jquery et javascript sont nouveaux pour moi, alors c’est peut-être une question idiote, mais j’ai des problèmes pour définir la valeur obtenue à partir d’une option sélectionnée dans select2 avec une entrée de texte. Ceci est mon code:
<head>
<!-- stylesheets -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<!-- scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$(function(){
// turn the element to select2 select style
$('.select2').select2({
placeholder: "Select a state"
});
var data = $(".select2 option:selected").text();
$("#test").val(data);
});
</script>
</head>
<body>
<p>select2 select box:</p>
<p>
<select class="select2" style="width:300px">
<option> </option>
<option value="AL">Alabama</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
</p>
<input type="text" id="test">
</body>
</html>
Des idées sur ce que je fais mal?
Merci!
Tu es presque là. Placez vos assignations de valeurs dans le gestionnaire change
du menu déroulant. La façon dont vous l'avez, il est simplement appelé lorsque la page est chargée.
$(function(){
// turn the element to select2 select style
$('.select2').select2({
placeholder: "Select a state"
});
$('.select2').on('change', function() {
var data = $(".select2 option:selected").text();
$("#test").val(data);
})
});
Vous pouvez utiliser change event : chaque fois qu'une option est sélectionnée, la valeur peut être copiée dans la zone de texte:
$(function(){
// turn the element to select2 select style
$('.select2').select2({
placeholder: "Select a state"
}).on('change', function(e) {
var data = $(".select2 option:selected").text();
$("#test").val(data);
});
});
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<p>select2 select box:</p>
<p>
<select class="select2" style="width:300px">
<option> </option>
<option value="AL">Alabama</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
</p>
<input type="text" id="test">
$("#e15").on("change", function () {
$("#e15_val").html($("#e15").val());
});
Selon les documents https://select2.org/programmatic-control/events#event-data
$('.select2').on('select2:select', function (e) {
var data = e.params.data;
$('#test').val(data.text);
});