How to display the input box in select2? - javascript

I am working in asp.net core. And I am using typescript. I am using select2 option.
HTML:-
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<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>
Script:-
<script>
$(document).ready(function () {
$(".js-example-basic-multiple").select2();
});
</script>
style:-
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
script:-
<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>
This is my code. I get output like this.
The input box is not appear. I want like this:
When I click in the box, the popup should appear like below:
How can I achieve it?
I write a html and script code in partial view. And I add a css and js file in layout html file.


Try below example. the code in the question don't have closing < script > tag.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
<title>Hello World using select2.js</title>
<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>
</head>
<body>
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<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>
</body>
<script>
$(document).ready(function () {
$(".js-example-basic-multiple").select2();
});
</script>
</html>


It works fine here,
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<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>
</body>
<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>
<script>
$(document).ready(function () {
$(".js-example-basic-multiple").select2();
});
</script>
</html>

Related

How to make select dropwdown width same?

I want to make the same width of both select.
Mean I want both select width same irrespective of option value
I want to make the same width of both select.
Mean I want both select width same irrespective of option value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I think it should be as simple as using CSS to set the width of the select elements in question:
select{ width: 16ch; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can modify your select element to have an explicit width: run snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<style type="text/css">
.form-select {
width:200px
}
</style>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Can't use materialize-select?

i try to use materialize-select,and it does't work?
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
JavaScript
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});

Try the following
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems,{});
});
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

Can we use select2 inside the dialog?

I am working in asp.net core. I am using typescript. I am using select2.
HTML:-
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<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>
Script:-
<script>
$(document).ready(function () {
$(".js-example-basic-multiple").select2();
});
</script>
css and js:-
<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>
This is my code for select2. I am using select2 inside the modal dialog. When using select2 inside the dialog, it does not work.
I check like using select2 outside of the modal dialog, it works fine.
Can we able to use select2 inside of the modal dialog? If yes means, how?
Version of select2: 4.0.3

It works fine inside modal too. (check snippet)
$(document).ready(function() {
$(".js-example-basic-multiple").select2();
$("#dialog").dialog();
});
<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<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>
</div>

MultiSelect using Jquery is not working

I am using This Jquery Multi Select but while using it it gives me error for $(...).multiSelect is not a function. I guees it is the problem of javascript not implemented so i check it twice but I found all javascript need is implemented properly. Below is the necessary code for it
<div id="PageList" class="portlet-body fuelux" >
<select name="Pages[]" size="20" id="Pages" multiple="multiple" style="border:none;width:100%"> <option>xyz</option>
<option value="1">xyz</option>
<option value="2">xyz</option>
<option value="3">xyz</option>
<option value="4">xyz</option>
<option value="5">xyz</option>
<option value="6">xyz</option>
</select>
</div>
<script src="~/assets/plugins/jquery-1.10.1.min.js"></script>
<script src="~/assets/scripts/ui-jqueryui.js"></script>
<script src="~/assets/lou-multi-select-759348a/js/jquery.multi-select.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#Pages').multiSelect();
});
</script>

Here is how you call the Scripts and I have attached a Screenshot of the o/p:
I have Just moved the Scripts above the HTML
Note: its a working example taken from your HTML only
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.multi-select.js"></script>
<script>
$(document).ready(function () {
$('#Pages').multiSelect();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="PageList" class="portlet-body fuelux" >
<select name="Pages[]" size="20" id="Pages" multiple="multiple" style="border:none;width:100%"> <option>xyz</option>
<option value="1">xyz</option>
<option value="2">xyz</option>
<option value="3">xyz</option>
<option value="4">xyz</option>
<option value="5">xyz</option>
<option value="6">xyz</option>
</select>
</div>
</form>
</body>
Edit: After Adding the Css of Multi select here is the view

Chosen is not styling my select drop-down properly

Here is my code:
<link href="Content/chosen.css" rel="stylesheet" type="text/css"/>
<div>
<select id="chzn-select" data-placeholder="Select an option...">
<option value=""></option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
</select>
</div>
<script type="text/javascript" src="../Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../Scripts/chosen.jquery.js"></script>
<script type="text/javascript" src="../Scripts/chosen.jquery.min.js"></script>
<script type="text/javascript">
$("#chzn-select").chosen();
</script>
This is the result:
I can "select" Option 1 or Option 2, and they will appear where the "Select an option..." label is.

Please try below code, it working for me.
<link href="http://harvesthq.github.com/chosen/chosen/chosen.css" rel="stylesheet" type="text/css"/>
<div>
<select id="chzn-select" data-placeholder="Select an option...">
<option value=""></option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
</select>
</div>
<script type="text/javascript">
$("#chzn-select").chosen();
</script>
Here is the JSFIddle (working demo of your code)
chosen.jquery.js was included twice in your code. Also i think chosse.css path need to be corrected in your code as per your directory structure.

Categories