select2 validation not empty value send - javascript

i have select2 jquery plugin and i set it to multiple select option and i want to required this field if not any option select then not submit the form and give the message this field is required. why when field is empty and i click on submit button and alert not show. any helps.
code
jQuery(function($){
$('#example').select2({
placeholder: 'Select a month'
});
$(".add").click(function(e){
if (jQuery('#example').val() == '') {
alert('this feilds is required');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example" multiple="multiple" style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<div>
<button class="add">submit</button>
</div>

You are checking for '' which is a string space i believe where as #example give null as a default value.
Just check for null.
jQuery(function($){
$('#example').select2({
placeholder: 'Select a month'
});
$(".add").click(function(e){
if (jQuery('#example').val() == null) {
alert('this feilds is required');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example" multiple="multiple" style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<div>
<button class="add">submit</button>
</div>

Related

How to select multiple option automatically in jquery?

I am using multi-select picker. I want to automatically select options on ajax response.
I have data in this form
tuesday,wednesday,Thursday
here is a select picker
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
<option value="monday" >Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday" >Wednesday</option>
<option value="thursday" >Thursday</option>
<option value="friday">Friday</option>
<option value="saturday" >Saturday</option>
<option value="sunday" >Sunday</option>
</select>
this is the variable which is having data
var operation_day = editData.attr('data-operation_day');
How i can automatically select those option which are in variable with help of jquery?
You can use .split(",") to convert them in array and then set value using selectpicker('val', operation_day.split(",")) lastly refresh your selectpicker.
Demo Code :
var operation_day = "tuesday,wednesday,thursday";
console.log(operation_day.split(","))
$('select').selectpicker('val', operation_day.split(",")); //split them and set value
$('select').selectpicker('refresh') //refresh ..selectpicker
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
You can pass the array for multiple selections like below.
var operation_day = "tuesday,wednesday,thursday" //editData.attr('data-operation_day');
var arr = operation_day.split(',');
$(".kt-selectpicker").val(arr)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
Note: It's case sensitive. thursday is not equal to Thursday.

jQuery Select2: How to add placeholder text for multi-value selectboxes

I'm working with multi-value selectboxes using the Select2 jQuery plugin. These text boxes have tagging enabled, so the user can enter arbitrary values. I have a placeholder set using the select2 options, but it is only visible when the selectbox is empty. See below.
Empty selectbox, shows placeholder:
Selectbox has values, no placeholder:
What I'd like to have is something like the image below. I'd like to specify a different placeholder value for the search input field that will show only when the selectbox has values in it. When the selectbox is empty, the placeholder will return to the initial placeholder value.
On the event change.select2 you can check if there are more than 0 values selected and so you can reset the placeholder to a new value:
$('.js-example-basic-multiple').on('change.select2', function (e) {
if ($('.js-example-basic-multiple').val().length > 0) {
$('.js-example-basic-multiple').data('select2')['$container'].find(':input[type=search]')
.attr({placeholder: "Select a state again and again", style: 'width: 100%;'})
}
});
The snippet:
$('.js-example-basic-multiple').select2({
placeholder: "First selection....",
allowClear: false
});
$('.js-example-basic-multiple').on('change.select2', function (e) {
if ($('.js-example-basic-multiple').val().length > 0) {
$('.js-example-basic-multiple').data('select2')['$container'].find(':input[type=search]')
.attr({placeholder: "Select a state again and again", style: 'width: 100%;'})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<select class="js-example-basic-multiple js-states form-control select2-hidden-accessible" multiple=""
data-select2-id="select2-data-61-g4nr" tabindex="-1" aria-hidden="true" style="width: 100%;">
<optgroup label="Alaskan/Hawaiian Time Zone" data-select2-id="select2-data-66-rote">
<option value="AK" data-select2-id="select2-data-67-tgfy">Alaska</option>
<option value="HI" data-select2-id="select2-data-68-1ncw">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone" data-select2-id="select2-data-69-ey9b">
<option value="CA" data-select2-id="select2-data-70-cjom">California</option>
<option value="NV" data-select2-id="select2-data-71-qoj8">Nevada</option>
<option value="OR" data-select2-id="select2-data-72-q7yi">Oregon</option>
<option value="WA" data-select2-id="select2-data-73-ph4j">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone" data-select2-id="select2-data-74-wzgi">
<option value="AZ" data-select2-id="select2-data-75-86ql">Arizona</option>
<option value="CO" data-select2-id="select2-data-76-3mqr">Colorado</option>
<option value="ID" data-select2-id="select2-data-77-ry7y">Idaho</option>
<option value="MT" data-select2-id="select2-data-78-z7m6">Montana</option>
<option value="NE" data-select2-id="select2-data-79-2lte">Nebraska</option>
<option value="NM" data-select2-id="select2-data-80-xd5z">New Mexico</option>
<option value="ND" data-select2-id="select2-data-81-2wmh">North Dakota</option>
<option value="UT" data-select2-id="select2-data-82-0lmr">Utah</option>
<option value="WY" data-select2-id="select2-data-83-yeoz">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone" data-select2-id="select2-data-84-mr5y">
<option value="AL" data-select2-id="select2-data-85-l6br">Alabama</option>
<option value="AR" data-select2-id="select2-data-86-jpai">Arkansas</option>
<option value="IL" data-select2-id="select2-data-87-x0o2">Illinois</option>
<option value="IA" data-select2-id="select2-data-88-k0y3">Iowa</option>
<option value="KS" data-select2-id="select2-data-89-oki5">Kansas</option>
<option value="KY" data-select2-id="select2-data-90-ot5d">Kentucky</option>
<option value="LA" data-select2-id="select2-data-91-j93e">Louisiana</option>
<option value="MN" data-select2-id="select2-data-92-ljou">Minnesota</option>
<option value="MS" data-select2-id="select2-data-93-4cwz">Mississippi</option>
<option value="MO" data-select2-id="select2-data-94-4452">Missouri</option>
<option value="OK" data-select2-id="select2-data-95-hee9">Oklahoma</option>
<option value="SD" data-select2-id="select2-data-96-h9gh">South Dakota</option>
<option value="TX" data-select2-id="select2-data-97-q4kh">Texas</option>
<option value="TN" data-select2-id="select2-data-98-wps1">Tennessee</option>
<option value="WI" data-select2-id="select2-data-99-mdzk">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone" data-select2-id="select2-data-100-iqi4">
<option value="CT" data-select2-id="select2-data-101-rkjk">Connecticut</option>
<option value="DE" data-select2-id="select2-data-102-ih1a">Delaware</option>
<option value="FL" data-select2-id="select2-data-103-4zkz">Florida</option>
<option value="GA" data-select2-id="select2-data-104-sdgj">Georgia</option>
<option value="IN" data-select2-id="select2-data-105-ulm1">Indiana</option>
<option value="ME" data-select2-id="select2-data-106-onok">Maine</option>
<option value="MD" data-select2-id="select2-data-107-qwwa">Maryland</option>
<option value="MA" data-select2-id="select2-data-108-j2v5">Massachusetts</option>
<option value="MI" data-select2-id="select2-data-109-uhro">Michigan</option>
<option value="NH" data-select2-id="select2-data-110-ui5e">New Hampshire</option>
<option value="NJ" data-select2-id="select2-data-111-yd0u">New Jersey</option>
<option value="NY" data-select2-id="select2-data-112-h33j">New York</option>
<option value="NC" data-select2-id="select2-data-113-7t3i">North Carolina</option>
<option value="OH" data-select2-id="select2-data-114-bc13">Ohio</option>
<option value="PA" data-select2-id="select2-data-115-lbm3">Pennsylvania</option>
<option value="RI" data-select2-id="select2-data-116-zgza">Rhode Island</option>
<option value="SC" data-select2-id="select2-data-117-kyou">South Carolina</option>
<option value="VT" data-select2-id="select2-data-118-npxe">Vermont</option>
<option value="VA" data-select2-id="select2-data-119-2ony">Virginia</option>
<option value="WV" data-select2-id="select2-data-120-xyi2">West Virginia</option>
</optgroup>
</select>

Select2: How to select the "value" of an option?

I have a dropdown of countries:
<select size="1" class="product-load-port" name="product-load-port">
<option value=""></option>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
</select>
How to select the value of the chosen country, ex. if Albania was chosen, value should be "AL"?
I'm trying to do that with
$('select.product-load-port').select2('data')[0].text;
but it gives me "Albania" as a value.
You can do that by simply accessing the .val() of the underlying native <select> element:
$('select.product-load-port').val()
You can also proxy it through .select2().val(), but that's not really necessary anyway:
$('select.product-load-port').select2().val()
$('select.product-load-port').select2();
$('#getSelectedValue').on('click', function() {
console.log($('select.product-load-port').val());
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>
<select size="1" class="product-load-port" name="product-load-port">
<option value=""></option>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
</select>
<button type="button" id="getSelectedValue">Log selected value to console</button>

Dynamic select works only for the first time and doesn't work anymore in a trivial jQuery example

$(document).ready(function () {
$("#block_1").change((e) => {
console.log("block_1 select ", e.target.value);
$("#children_1")
// .find("[value!='" + e.target.value + "']")
.find("option")
.removeAttr("selected");
$("#children_1")
.find("[value='" + e.target.value + "']")
.attr("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/script.js"></script>
</head>
<body style="padding: 50px;">
<select id="block_1">
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<div id="children_1" for="1" style="padding: 10px 50px;">
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select>
<option value=""></option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<select>
<option value=""></option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</div>
<hr />
</body>
</html>
My purpose is to select child select boxes indirectly by selecting a parent select boxes.
But now, it works once for every option, and don't work anymore when I select the same option again.
I hope to fix this, but not sure what was wrong in my code.
Typically, attributes are used for setting the initial value of an element's property, so repeatedly changing an attribute will not always have the intended effect.
Instead, use .prop('selected', true) or .prop('selected', false)
$(document).ready(function () {
$("#block_1").change((e) => {
console.log("block_1 select ", e.target.value);
$("#children_1")
// .find("[value!='" + e.target.value + "']")
.find("option")
.prop("selected", false);
$("#children_1")
.find("[value='" + e.target.value + "']")
.prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/script.js"></script>
</head>
<body style="padding: 50px;">
<select id="block_1">
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<div id="children_1" for="1" style="padding: 10px 50px;">
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select>
<option value=""></option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<select>
<option value=""></option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</div>
<hr />
</body>
</html>

change select option by javascript

i have problem in javascript
i make carwebsite
i need to achieve functionality as per the image
when I choose company in "make" select box,
it shows me all classes. Then I need to choose a "class" from second dropdown and it should show me all Models
now i get one code
<script type="text/javascript">
$(document).ready(function(){
$('.car').change(function()
{ getcar = $(this).val();
//console.log(getcar);
$('.subcar').hide();
$('.'+getcar).show();
}); });
// end DOM
</script>
this is select (make)
<select name="car" class="car">
<option value="0" SELECTED="SELECTED">--Choose--</option>
<option value="Acura">Acura</option>
<option value="Alfa_Romeo">Alfa Romeo</option>
<option value="Aston_Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Can_Am">Can Am</option>
<option value="Chery">Chery</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ducati">Ducati</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="GMC">GMC</option>
</select>
this is select (class)
<select name="branch_name" class="subcar Acura" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="CL">CL</option>
<option value="CSX">CSX</option>
<option value="EL">EL</option>
<option value="ILX">ILX</option>
<option value="ZDX">ZDX</option></select>
<select name="branch_name" class="subcar Alfa_Romeo" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="101">101</option>
<option value="156">156</option>
<option value="156CROSSWAGON">156CROSSWAGON</option>
<option value="Spider">Spider</option>
</select>
<select name="branch_name" class="subcar Aston_Martin" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="DB9">DB9</option>
<option value="Healey">Healey</option>
<option value="Vantage">Vantage</option>
</select>
how can i make third select
???

Categories