I'm useing Laravel 5.6. I could make Single select boxes
that is working fine.
I read this page
https://select2.org/getting-started/basic-usage
and I use this CDN
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
I pasted this code below to my blade file. I can see items and I can
click them. but there is no multi view come out and cross mark too.
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
What is wrong my code?
Create a custom JS file. And link it to your html:
<script src="YourJsFile.js"></script>
In YourJsFile.js:
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
Your html file:
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="WY">Wyoming</option>
</select>
Related
I want to create select function on my laravel project , this Select is select2 multiple like on this doc link . on bulma documentation this select multiple is not have function javascript code . only like this :
<div class="select is-multiple">
<select multiple size="8">
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia</option>
<option value="Brazil">Brazil</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Ecuador">Ecuador</option>
<option value="Guyana">Guyana</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Suriname">Suriname</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
</select>
</div>
can someone help how to create this select2 so we can add more than 1 value on this field select ?
I'm trying to do something like this on the dropdown
I already tried different tag but failed to see the expected
<option id="makeDefault" value="0">Make <label class="option-placeholder">e.g. BMW, Mercedes</label></option>
Try this:
<select>
<option value="" disabled selected hidden>MAKE e.g. BMW...</option>
<option value="0">list item 1</option>
<option value="1">list item 2</option>
</select>
FIDDLE: https://jsfiddle.net/L0k6x0dh/1/
I want t o use Multiple select boxes for tags and head section i put:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
My view:
<div>
{!! Form::label('tags','Select Tags:') !!}
<select class="form-control select2-multi" multiple="multiple" name="tags">
#foreach ($tags as $tag)
<option value='{{ $tag->id }}'>{{ $tag->name }}</option>
#endforeach
</select>
<script type="text/javascript">
$(.select2-multi).select2();
And in the browser i get this:
enter image description here
$(document).ready(function() {
$(".js-example-basic-single").select2();
$(".js-example-basic-multiple").select2();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<br>
<strong>Single Select</strong>
<select class="js-example-basic-single form-control">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<br><br>
<strong>Multi Select</strong>
<select class="js-example-basic-multiple form-control" multiple>
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
It's working perfectly fine.
make sure you've included all the required css and js plugins
NOTE:
Add this class for single select js-example-basic-single option
js-example-basic-multiple for multi-select option
I have this Code in ajax which automatically pulls country and related state & city from js file.
I want to add Time-Zone to the related country/state/city.
Is there any better alternative way to get time-zone of the user performing sign-up?
Following is the code, Thanks
<select name="country" class="countries" id="countryId">
<option value="">Select Country</option>
</select>
<select name="state" class="states" id="stateId">
<option value="">Select State</option>
</select>
<select name="city" class="cities" id="cityId">
<option value="">Select City</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://lab.iamrohit.in/js/location.js"></script>
I am looking for JavaScript or in jquery for my custom dropdown menu
<form name="menu">
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Courses</option>
<option value="http://www.google.com">Course1</option>
<option value="http://www.youtube.com">Course2</option>
<option value="http://www.yahoo.com">Course3</option>
</select>
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Location</option>
<option value="http://www.google.com">Location1</option>
<option value="http://www.youtube.com">Location2</option>
<option value="http://www.yahoo.com">Location3</option>
</select>
</form>
http://jsfiddle.net/kundansingh/d4FEV/2/
in this if i select any of the course and then the location it should redirect to a paticular url, so for each course, different locations will be there and url
Follow steps:
Just pass the value(url) to a javascript function as an argument.
Grab that value in that javascript function.
Redirect the url (might use window.location.assign(url) function)`