Why is the script below not working? The JavaScript file is in another folder and my function only works when I call it via the console.
$('#myOptions').change(function() {
var val = $("#myOptions option:selected").text();
alert(val);
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Exos">
<meta name="viewport" content="width=device-width", initial-scale="1">
<link type="text/css" rel="stylesheet" href="css/exos.css">
<script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<select id="myOptions">
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>
</body>
</html>
Image of my folder:
Image of inside the js folder:
Because you're trying to select an element before it exists on the page:
$('#myOptions')
Wrap your jQuery code in a document.ready handler so it executes after the DOM has fully loaded:
$(function () {
$('#myOptions').change(function() {
var val = $("#myOptions option:selected").text();
alert(val);
});
});
Conversely, you could move your script elements to the bottom of the page so they are referenced after the target DOM elements:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Exos">
<meta name="viewport" content="width=device-width", initial-scale="1">
<link type="text/css" rel="stylesheet" href="css/exos.css">
</head>
<body>
<select id="myOptions">
<option value='option1'>Gateway 1</option>
<option value='option2'>Gateway 2</option>
<option value='option3'>Gateway 3</option>
</select>
<script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
You have to move the scripts to the bottom of your <body> or wrap the code in $(document).ready function.
Related
This is the input I want to add my project https://select2.org/tagging but it's show like this:
I added Select2 installation links but it doesn't work. What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<title>Document</title>
</head>
<body>
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true
});
</script>
</body>
</html>
The class name in your script doesn't occur in your markup. It needs to be on the select element.
Also, you don't seem to be loading jQuery, on which Select2 depends.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select class="form-control js-example-tags">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true
});
</script>
</body>
I'm using select2, When someone select value in select dropdown. select2 added data-select2-id in to all div that come before select2, not same data-select2-id value but increase each time.
have a look in below image
$(function () {
//Initialize Select2 Elements
$('.select2').select2()
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
</head>
<body>
<div class="row">
<div class="form-group">
<label>Minimal</label>
<select class="form-control select2" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
</body>
</html>
its probably not what you are looking for, but if you use <input> instead of <select> this doesn't happen for me.
I also had to put the <input> inside a separate <div> on some pages.
I'm trying to incorporate select2 multi-select functionality in my application but can't seem to get it to work. I have included my code below. I have run through all of the basic issues that people usually face and my code should be loading in appropriate order.
View
#extends('layouts.layout')
#extends('layouts.navbar')
#section('content')
<fieldset>
<small class="errorMessage"></small>
<label for="tags">Tags</label>
<select name="tags" id="tagsList" class="select2-multi form-control" multiple="multiple">
#foreach($tags as $tag)
<option value="{{$tag->id}}">{{$tag->name}}</option>
#endforeach
</select>
</fieldset>
Layout file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSS -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<link rel="stylesheet" href="{{asset('css/main.css')}}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="{{asset('css/select2.min.css')}}">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Raleway" rel="stylesheet">
<!-- JavaScript -->
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<title>Plant Lab</title>
</head>
<body>
#include('includes.messages')
#yield('jumbotron')
#yield('content')
<script src="{{asset('js/custom.js')}}"></script>
<script src="{{asset('js/select2.min.js')}}"></script>
</body>
</html>
Custom JS file
// Select 2
$(document).ready(function() {
$('.jselect2-multi').select2();
});
My browser is just rendering a regular HTML select form and the Select2 is not being applied. Where am I going wrong? Thank you!
make your input field name array,
<select name="tags[]" id="tagsList" class="select2-multi form-control" multiple="multiple">
#foreach($tags as $tag)
<option value="{{$tag->id}}">{{$tag->name}}</option>
#endforeach
</select>
You make a type mistake,
// Select 2
$(document).ready(function() {
$('.select2-multi').select2(); // class name should be select2-multi not jselect2-multi
});
I used Select2 4.0.6, I have a bug like below:
allowClear gives "Uncaught TypeError: Cannot read property 'id' of undefined" when used on select.
How can I fix this bug?.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</head>
<body>
<select role="select" id="myoption">
<option value="001">abcs </option><option value="002">dshdsh</option><option value="003">A</option>
<option value="004">ANAM CO</option>
</select>
</body>
</html>
<script>
$("#myoption").select2({
allowClear: true,
width: '300px',
height: '34px'
//data: data
});
</script>
If you set the debug property to true you'll see a warning message.
The allowClear option should be used in combination with the
placeholder option.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</head>
<body>
<select role="select" id="myoption">
<option value="001">abcs </option><option value="002">dshdsh</option><option value="003">A</option>
<option value="004">ANAM CO</option>
</select>
</body>
</html>
<script>
$("#myoption").select2({
allowClear: true,
width: '300px',
height: '34px',
debug: true
//data: data
});
</script>
So you have to define a placeholder:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</head>
<body>
<select role="select" id="myoption">
<option value="001">abcs </option><option value="002">dshdsh</option><option value="003">A</option>
<option value="004">ANAM CO</option>
</select>
</body>
</html>
<script>
$("#myoption").select2({
allowClear: true,
width: '300px',
height: '34px',
placeholder: 'select..'
//data: data
});
</script>
In my case data-placeholder helped as shown below:
Select element:
<select class="form-control select2" data-placeholder="All" required="required" id="manager_id" name="filter[manager_id]" tabindex="-1" aria-hidden="true">
<option value="1" selected="selected">Manager 1</option>
<option value="2" selected="selected">Manager 2</option>
</select>
JS:
$('.select2').each(function(){
var select = $(this);
select.select2({
width: '100%',
allowClear: !select.prop('required'),
language: {
noResults: function () {
return "{{ __('No results found') }}";
}
}
});
});
I am new to javascript and jQuery, but I am trying to use the Chosen plugin. I have followed all the steps I can find, but it is not working. Here is what I have done so far.
index.blade.php:
<html lang="en" ng-app="wim">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WIM(afy)</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/wimmain.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="bower_components/chosen/chosen.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/restangular/dist/restangular.min.js"></script>
<script src = "js/app.js"></script>
<script src = "js/services.js"></script>
<script src = "js/controllers.js"></script>
<style>
li {
padding-bottom: 8px;
}
</style>
</head>
<body style="background-color: lightgray;">
<div ng-view></div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/chosen/chosen.jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".chosen-select").chosen();
});
</script>
</body>
I have included the stylesheet at the top, and included chosen.jquery.js after I included jQuery and before my script. The actual HTML page is displayed at the point where it says <div ng-view></div>.
Here's the html:
<select class="chosen-select" id="interests" multiple="true" ng-model="interests">
<option value="Art">Art</option>
<option value="Biking">Biking</option>
<option value="Camping">Camping</option>
<option value="Coffee">Coffee</option>
<option value="Concerts">Concerts</option>
<option value="Dining">Dining</option>
<option value="Running">Running</option>
<option value="Shopping">Shopping</option>
</select>
Right now it is just displaying the normal HTML 5 multiple select list where you have to hold shift or use ctrl to select multiple things.
Do I need to move my code around differently? Can someone help me figure out what I'm doing wrong? Thanks.
Not sure if this is your issue, but I have had to trigger an update on chosen before. Try $("#interests").trigger("update")