How to check if select2.js has at least one option selected?
The code bellow shows the message 'Please select at least one item in the list.' even after selecting one item.
$('form.validate-form').validator({
disable: false
});
$( "select.validate" ).each(function() {
$(this).validator();
$(this).get(0).setCustomValidity('Please select at least one item in the list.');
});
How can I make the message 'Please select at least one item in the list.' disappear after selecting at least one option?
I am using Bootstrap validator plugin.
jsfiddle
SOMETHING LIKE THIS
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
<style>
.mySelect {
width: 300px;
}
</style>
</head>
<body>
<form id="myform">
<select multiple="true" class="mySelect" name="item" required>
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="submit" name='submit' value="Submit">
</form>
<script>
$(document).ready(function() {
$(".mySelect").select2();
$("#myform").validate(
{
rules:
{
item:
{
required: true
}
}
});
});
</script>
</body>
</html>
Related
var drag = document.getElementById("drag");
drag.onclick = function(e){
e.preventDefault();
}
#drag {
width: 50px;
}
<select id="drag" multiple="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
is it possible with javascript to stop the hold-select effect and make it a drag to change elements order in the list?
i tried to e.preventDefault() and to bind a draggable script in options but did not work
I don't think you can do that with select element :
Trying to change the code you provide making a simple one
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
script.js :
$("ul").on('click', 'li', function (e) {
if (e.ctrlKey || e.metaKey) {
$(this).toggleClass("selected");
} else {
$(this).addClass("selected").siblings().removeClass('selected');
}
}).sortable({
connectWith: "ul",
delay: 150,
revert: 0,
});
However you can use multiselect plugin ,a demo here
EDITED :
If you still want the select tag look you can use dragOptions
$(document).ready(function(){
$("#drag").dragOptions({
onDrag: function(){
console.log('onDrag callback: ', this);
},
onChange: function(){
console.log('onChange callback: ', this);
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>drag</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="form-group">
<select id="drag" size="5" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gitcdn.link/repo/NikitaKA/jquery.dragOptions/master/jquery.dragoptions.min.js" type="text/javascript" language="javascript"></script>
</html>
As you see when you drag an option an error occurs (maybe an issue))
If someone can tell me what's going wrong here i will appreciate that !
Hope that helps someone .
I am using "Bootstrap Select Plugin Jquery". How do I replace it with Select Jquery code.
I would like to choose the value of the example 2.
Desired result:
enter image description here
MY Code:
$(document).ready(function() {
$('select').selectpicker();
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<body>
<select class="my-select">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Other</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
</body>
</html>
$('.my-select').selectpicker('val', '2');
I have multiple selectpicker and i dont understand how to change selected items format. Any suggestions guys?
I read this and found option selectedTextFormat but that's not what i need
$('.selectpicker').selectpicker({
selectedTextFormat: 'values'
});
Found sollution
$(window).on('load', function() {
$('.selectpicker').selectpicker({
showSubtext: true
});
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script>
<select class="selectpicker form-control" multiple>
<option data-subtext="Mustard" value="">1</option>
<option data-subtext="Ketchup">2</option>
<option data-subtext="Relish">3</option>
</select>
I have the following select box appearing in chrome but not in other browsers
Using bootstrap-select (1.12.2 V) to style the select box.
options.html
<select ng-model="ctrl.qSettings.env"
ng-change="ctrl.envChanged()"
class="selectpicker"
data-width="fit">
<option style="color: #5cb85c;"
ng-repeat="env in ctrl.qSettings.envs">{{env}}
</option>
</select>
html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<-- bootstrap select -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap
select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body ng-controller="abcCtrl as ctrl">
<div ng-include="'templates/options.html'"></div>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<-- ui select -->
<script src="node_modules/ui-select/dist/select.min.js"></script>
<link rel="stylesheet" href="node_modules/ui-select/dist/select.min.css">
</body>
</html>
Can you please guide me on what would be wrong here,Thanks.
Try ng-options.
<select ng-model="ctrl.qSettings.env"
ng-change="ctrl.envChanged()"
class="selectpicker"
data-width="fit"
ng-options="env in ctrl.qSettings.envs">
</select>
I am trying to develop an Image Picker following these tutorials http://jsfiddle.net/huanlin/mgvrc/ and http://rvera.github.io/image-picker/#
Here is the code I have tried so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Try Image Picker</title>
<link rel="stylesheet" type="text/css" href="image-picker.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="image-picker.js"/> </script>
<script type="text/javascript" src="image-picker.min.js"/> </script>
<script>
$(document).ready(function () {
$("#selectImage").imagepicker({
hide_select: true
});
var $container = $('.image_picker_selector');
// initialize
$container.imagesLoaded(function () {
$container.masonry({
columnWidth: 30,
itemSelector: '.thumbnail'
});
});
});
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<select id="selectImage" class="image-picker">
<option value=""></option>
<option data-img-src="o.png" value="1"> Image 1 </option>
<option data-img-src="aa.png" value="2"> Image 2 </option>
<option data-img-src="ee.png" value="3"> Image 3 </option>
</select>
<br>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
But no image is showing in the browser. All CSS, JS scripts and images have been linked properly. Can you suggest what am I doing wrong here?
This is jQuery plugin. I see it's missing in your html head.