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.
Related
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>
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. 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>
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 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/