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>
Related
I am trying with the multi select with check box plugin of jQuery as suggested in the following link
http://davidstutz.de/bootstrap-multiselect/#getting-started
But while i implemented at js fiddle for testing means doesnt work as expected, what would be the issue here
This is the link to js fiddle test code
$('select[multiple]').multiselect();
$('#langOpt').multiselect({
columns: 1,
placeholder: 'Select Languages',
search: true
});
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- MultiSelect CSS & JS library -->
<link href="multiselect/jquery.multiselect.css" rel="stylesheet" />
<script src="multiselect/jquery.multiselect.js"></script>
<select name="langOpt[]" multiple id="langOpt">
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Objective-C">Objective-C</option>
<option value="JavaScript">JavaScript</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Ruby on Rails">Ruby on Rails</option>
<option value="Android">Android</option>
<option value="iOS">iOS</option>
<option value="HTML">HTML</option>
<option value="XML">XML</option>
</select>
In your post you said you were using the jQuery plugin, and you did use it in your code, but the link and image are for the bootstrap-multiselect, they are different. I assume your are trying to use the bootstrap plugin from the start, I've changed the answer to bootstrap-multiselect.
$('select[multiple]').multiselect();
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- MultiSelect CSS & JS library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<select name="langOpt[]" multiple id="langOpt">
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Objective-C">Objective-C</option>
<option value="JavaScript">JavaScript</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Ruby on Rails">Ruby on Rails</option>
<option value="Android">Android</option>
<option value="iOS">iOS</option>
<option value="HTML">HTML</option>
<option value="XML">XML</option>
</select>
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>
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
I have a select box on my web page, when i selct a value it should add an other select box and if i select a value on second select box i need to add a third select box
Here is my code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js">
</script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<script type="text/javascript">//<![CDATA[
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
//]]>
</script>
</head>
<body>
<select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
<div id="red" class="colors" style="display:none"> <select id="colorselector">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select> </div>
<div id="yellow" class="colors" style="display:none">
<select id="colorselector">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div id="one" class="colors" style="display:none"> one... </div>
<div id="two" class="colors" style="display:none">
<select id="colorselector">
<option value="one">four</option>
<option value="two">five</option>
<option value="three">six</option>
</select>
</div>
</body>
</html>
I got the second select box, but i cant able to add the third one based on the select select box value
As someone has said above, IDs must be unique.
Use:
Yellow > two
http://jsfiddle.net/psyat5s8/
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.