I can't get it to do anything. The drop down just behaves normally. I've followed their instructions and created the simplest demo I could and still nothing works. I've checked my paths and put everything in the same directory to make sure everything is being found. I have jQuery being loaded first.
Here's the html file:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.searchabledropdown-1.0.8.src.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
Here's a link to the plugin. Demo is on the plugin page: http://jsearchdropdown.sourceforge.net/
this works for me:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
It seems like the $.browser has been removed from jquery 1.9 core and above see the reference here you can decide to fix the problem by changing the library, use an older jquery version or use another alternative here you can find some better examples.
Good luck!
I downloaded the code and tested it. The problem is jQuery 1.9.1, when I put that version it does not work, but when I put back jQuery 1.8.3 it works.
I don't think there is a way to solve it unless you dig in the library, so it's better to use 1.8.3 as in the demo.
For the above Example: Once you searched the key like 'Zoo..' then you can select 'Zoomba'. Again If want to change the selection, in that list you can able to see only 'Zoomba' not all values.
If you want to show all values in that list you have to clear that searched key once selected index changed. Like this,
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Searchable</title>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myselect').searchable();
$('#myselect').change(function() {
$(this).autocomplete('search', '');
});
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
You written code is fine, It is a browser and Jquery version related issue.
Runs on IE 7.x, IE 8.x, Firefox 3.5.x, Safari 4.x, Opera 10.x, Chrome 3.x
It uses version Jquery 1.7.2 and Jquery UI 1.8.18
Also use plugin http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/searchabledropdown/jquery.searchabledropdown.js
You can check the running version on JSFiddle
http://jsfiddle.net/JWyRZ/
You always can use jquery-browser-plugin plugin from https://github.com/gabceb/jquery-browser-plugin. It adds the functionality missed by upgrade to 1.9. Just make sure you load jquery first and jquery-browser plugin afterwards.
Related
I'm trying to manage select2 library in order to augment the capabilities of natives select html controls.
According to the official documentation (very compressed) it says that for using select2 you only need to download they CSS and JavaScript files and that is (and also, implicitly assumed, that you need jQuery).
So, there is a way of initializing select using HTML5 data attributes, but I am not getting it; I'm trying to follow their example. Perhaps I am missing some important note here.
Here is the HTML I am trying to do
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<h1>Hello Select2</h1>
<div>
<select multiple id="a_select" data-tags="true" data-placeholder="Select an option" data-allow-clear="true" style="width:100%">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</body>
</html>
Also a link to plunker, to have a live example ready to go. https://plnkr.co/edit/Xk101K3sowAYQwbRCFez?p=preview
PS: I can achieve the desired result thought JavaScript, but is quite annoying to don't know what is not working when i just followed the example on the official site.
You're not initializing Select2 anywhere... data-* attributes let you override default configuration, but you still need to kick off the plugin:
<script>$('select').select2();</script>
https://plnkr.co/edit/RPObSPVl8jlZgtedsK38?p=preview
I am new to bootstrap. I do not understand why these simple multiselect options are not clickable.
EDIT
The first multiselect on the test-site below is the one in question. I have tested using Chrome and Firefox.
EDIT-2
I am also using angularjs and think there may be a conflict somewhere. I am in the process of testing this hypothesis out.
HTML
<head>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<script src="js/bootstrap-multiselect.js"></script>
</head>
<label for="work-type" class="fixed50">Type:</label>
<select id="work-type" name="work-type[]" multiple >
<option value="fiction">Fiction</option>
<option value="non-fiction">Non-Fiction</option>
</select>
The only javascript referense:
JS
$("#work-type").multiselect();
Here is a link to my test-site.
You also need to introduce a js file and a css file.
See details：
http://davidstutz.github.io/bootstrap-multiselect/
i am using star rating plugin from https://github.com/ripter/jquery.rating, and using select box code as
<select name="Rating">
<option value="6">1</option>
<option value="7">2</option>
<option value="8">3</option>
<option value="9">4</option>
<option value="10">5</option>
</select>
And javascript code is like
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.rating.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select[name='Rating']").addClass('rating');
$(".rating").rating();
$("select[name=Rating]").bind("change", function(){
alert( $("select[name=Rating]").val() );
});
});
</script>
And am using the same CSS available with the plugin. Here am trying to alert the selected value. Its working fine with IE8, But not working with Firefox & chrome. in firefox & chrome alert value is always 6. I am not getting what is the problem. Please help me to solve this issue.
Thanks in advance.
Try including JQuery Migrate into your project and see if it's works
https://github.com/jquery/jquery-migrate/
I've got this odd problem with jQuery. I'm trying to let the change of an html select, trigger a post to a .php that returns new replacement html data for another select element.
I succeed in replacing the select html with just the post part, but when I add the .change part it stops working.
Here's my test page html(it's a .php page)
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<select id=control6>
<option selected="selected" value="normal">normal</option>
<option value="change">change</option>
</select>
<select id=sortedselect6>
<option selected="selected" value="alphabetic">alphabetic</option>
<option value="grammatic">grammatic</option>
<option value="assessment">assessment</option>
<option value="maximatch">maximatch</option>
</select>
<select id=dummyselect6>
<option selected="selected" value="dummy1">dummy1</option>
<option value="dummy2">dummy2</option>
</select>
</body>
</html>
the ajax.js
jQuery("select#control6").change(function() {
jQuery.post('verwerker.php', {
currentselect: jQuery("select#control6").val()
}, function(htmldata) {
jQuery("select#sortedselect6").html(htmldata);
});
});
verwerker.php
<?php
echo '<option value="alphabetic">alphabetic</option>
<option selected="selected" value="grammatic">grammatic</option>
<option value="assessment">assessment</option>
<option value="maximatch">maximatch</option>';
?>
Now if I only put the following in ajax.js then it changes the sortedselect6 to grammatic as selected instantly. So it must be something with the .change part that messes up?
jQuery.post('verwerker.php', {
currentselect: jQuery("select#control6").val()
}, function(htmldata) {
jQuery("select#sortedselect6").html(htmldata);
});
You can view the last piece of code (the one without the .change) at work here http://www.tarile.net63.net/thebirdistheword.php
P.S.: the {currentselect:jQuery("select#control6").val()} is for later, it has no purpose right now
Solved! The problem was that my jQuery couldn't load some of the elements because the page wasn't yet fully loaded. Damn I feel really dumb to have made that mistake, really dumb. xD here's the fixed code:
jQuery(document).ready(function(){
jQuery("#sortedselect6").change(function() {
jQuery.post('verwerker.php',{selection:jQuery("select#control6").val()}, function(newSelectdata) {
jQuery("select#sortedselect6").html(newSelectdata);
});
});
});
Your basic change and ajax code works fine in this jsfiddle. Note that data is slightly different simply due to fiddle requires you to send the actual html in order to test ajax
http://jsfiddle.net/up6fG/
Make sure you are wrapping your code in ready event so that the elements exist when code fires
$(function(){
/* your code here*/
})
I'm trying to do something when a user selects an option from a select box - As simple as can be right? I'm using JQuery 1.3.1 to register a click handler with the id of the select box. Everything was fine until I tested using Chrome and Safari and found it didn't work.
Firefox 3.05 - YES
I.E 7.0.5730.13 - YES
IE6Eolas - YES
Sarafi 3.2.1 - NO
Chrome 1.0.154.43 - NO
See below code:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#myoption').click(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
});
</script>
</head>
<body>
<select id="myoption">
<option value="A">A</option>
<option value="B">B</option>
</select>
</body>
</html>
Anyone know what I should be doing for this to work? The alert does eventually get triggered but only after double-clicking the select box?
I found my problem. For Select boxes, you need to register a handler for a "change" event rather than a "click" event. It's strange that Firefox and IE work with the click event.
To sum up, the following code works across all browsers:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#myoption').change(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
});
</script>
</head>
<body>
<select id="myoption">
<option value="A">A</option>
<option value="B">B</option>
</select>
</body>
</html>
Safari and Chrome are both webkit based browsers. Webkit uses the native dropdown elements from your OS instead of implementing dropdowns itself, and unfortunately native dropdowns do not support a click events. For the same reason they also do not support CSS for option elements or other neat tricks.
The only cross-browser way to get those working is to implement this by hand using an <ul> and a lot of javascript.