Develop Reference

Jquery click event won't recognize elements from PHP list

When i load the list of items from MySQL using PHP,jquery event click won't recognize them. Jquery is working on all other elements on the page except the option tag which is created through for loop.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="js/js.js"></script>
<script>
$(document).ready(function(){
$(document).on('click', '.option', function(e){
alert('cls2 clicked');
e.preventDefault();
});
});
</script>
<select>
<?php
include "konekcija.php";
$upit="SELECT * FROM galerije group by naziv_galerije";
$rez = $connection->query($upit);
foreach ($connection->query($upit) as $r)
{
$ispis.=" <option value='{$r['id_galerije']}' class='option'>
{$r['naziv_galerije']}</option>";
}
echo $ispis;
?>

Use anchors in "Select" drop down list

Alright, so I have a currently functioning drop down list that displays a hidden div of content on the same page when that items is selected from the dropdown. The problem is I need to be able to have this same code as an anchor or something that will allow me to call up that particular section either when referencing that page from another page or by simply navigating back to the page after having moved forward in the content.
Here is the script:
<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
</script>
And my page content:
<div id="mental_lever_collection">
<div class="menu"><span class="title">Choose a Mental Lever Collection</span>
<select id="category_select" class="select">
<option value="#option1">Mental Levers & Leveraged Thinking</option>
<option value="#option2">Zero Aggression Basics</option>
</select></div>
<div id="option1" class="box">
Some Content
</div>
<div id="option2" class="box">
Some Content
</div>
</div>
If you have any ideas on how to tweak this to get the desired effect it would be greatly appreciated.

Fiddle Demo
Try this
$(document).ready( function() {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
var test = $(this).val();
console.log(test);
$(test).show();
});
});

There is an extra '#' in your code.
Please change $('#'+$(this).val()).show(); to $($(this).val()).show();
Hope this help you to solve the problem :
Full jquery code
<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$($(this).val()).show();
});
});
</script>

jQuery change event on dropdown

I just added the query lib to my web app and tested with simple alert:
<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
$(function(){
alert('jquery is working');
});
</script>
And works fine. However when i want to implement an "change" event on my dropdown
<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
$("#projectKey").change(function() {
alert($('option:selected', $(this)).text());
});
</script>
it displays me no alert, basically nothing is happening. My drop down is the following:
<select id="projectKey" name="projectKey">
<option value="AM">AM</option>
<option value="AIL">AIL</option>
<option value="NEB">NEB</option>
<option value="SSP">SSP</option>
</select>
Of course i tried to simplify the javascript, just o have
$("#projectKey").change(function() {
alert("test");
});
but still no joy. It will be something with the selector or the drop down. Tried also "select#projectKey" but the result was of course the same. Any idea what i am doing wrong?

You should've kept that DOM ready function
$(function() {
$("#projectKey").change(function() {
alert( $('option:selected', this).text() );
});
});
The document isn't ready if you added the javascript before the elements in the DOM, you have to either use a DOM ready function or add the javascript after the elements, the usual place is right before the </body> tag

Please change your javascript function as like below....
$(function () {
$("#projectKey").change(function () {
alert($('option:selected').text());
});
});
You do not need to use $(this) in alert.

Or you can use this javascript
$(function () {
$("#projectKey").change(function () {
alert($('#projectKey option:selected').text());
});
});

The html
<select id="drop" name="company" class="company btn btn-outline dropdown-toggle" >
<option value="demo1">Group Medical</option>
<option value="demo">Motor Insurance</option>
</select>
Script.js
$("#drop").change(function () {
var category= $('select[name=company]').val() // Here we can get the value of selected item
alert(category);
});

How to get jQuery DataTables to switch between multiple DOM tables?

I have a <select> and every time the user changes its selected option, I want a different jQuery Datatable to draw (using a hidden DOM <table> as the data source):
<!-- Assume I have included jquery.dataTables.css and jquery.dataTables.js correctly. -->
<style>
#hidden-tables {
display: hidden;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#table1").dataTable();
$("#table2").dataTable();
});
</script>
<select id="my-sel">
<option selected="selected" id="opt1">Nothing selected</option>
<option id="opt1">Opt1</option>
<option id="opt2">Opt2</option>
</select>
<div id="hidden-tables">
<table id="table1">
<!-- Omitted for brevity -->
</table>
<table id="table2">
<!-- Omitted for brevity -->
</table>
</div>
<!-- When the user selects opt1 or opt2 in the "my-sel" <select>, then display its corresponding table here. -->
<div id="table-to-show"></div>
Basically, when the page loads up, I want the my-sel select to be displaying "Nothing selected" and to have no tables drawn. When the user selects anything other than "Nothing selected", I want the appropriate jQuery DataTable to draw inside the table-to-show div. Thanks in advance!

One solution could be something like
<div class="show">
<table id="table1">
<!-- Omitted for brevity -->
</table>
</div>
<div class="hide">
<table id="table2">
<!-- Omitted for brevity -->
</table>
</div>
where
.hide {display:none;}
and
.show {display:block;}
All you have to do is to toggle the classes when you choose the different options from the select drop down...

Try this...
Replace this...
<script type="text/javascript">
$(document).ready(function () {
$("#table1").dataTable();
$("#table2").dataTable();
});
</script>
With this..
<script type="text/javascript">
$(document).ready(function () {
$('#my-sel').change(function () {
var opt = $(this).find('option:selected').html();
if (opt !== 'Nothing selected') {
$('#table-to-show').html('');
var tableName;
switch (opt) {
case 'Opt1':
tableName = 'table1';
break;
case 'Opt2':
tableName = 'table2';
break;
}
$('#' + tableName).clone(true).appendTo('#table-to-show');
$('#table-to-show table').dataTable();
}
});
});
</script>
Also change your display:hidden; to display:none;
"hidden" is used for css property "visible" not "display"
Hope that helps!

moving select options up and down via jquery

so I got this code working for Firefox and Chrome...what it does is it allows you to reorder the options within an HTML select form...but then when I tested the code via IE8, it's kind of patchy...it only works for the first few clicks and after that you have to click many times on the button for it to work..
Does anybody know any other code that allows you to reorder select field items that works perfectly in IE8?
<select id="list" multiple="multiple">
<option value="wtf">bahaha</option>
<option value="meh">mwaahaha</option>
</select>
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
Add Item
Remove item
<script>
$(document).ready(function(){
$('#mup').click(function(){
moveUpItem();
});
$('#mdown').click(function(){
moveDownItem();
});
});
function moveUpItem(){
$('#list option:selected').each(function(){
$(this).insertBefore($(this).prev());
});
}
function moveDownItem(){
$('#list option:selected').each(function(){
$(this).insertAfter($(this).next());
});
}

Your code for changing the options works fine. It seems IE8 isn't handling a "fast" second-click with the click event but rather expects a double click to be handled.
Using my test code below, you'll notice that in IE8 writes out the following when Move Down/Up is pressed "fast":
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Double-Click
But with FF/Chrome the following is printed:
Move Down Click
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Click
Move Down Double-Click
Here's the code I'm using to test. I haven't done any tests to see if it's jQuery's event binders that are causing the issues.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<select id="list" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
<script type="text/javascript">
var $DEBUG = null;
$(document).ready(function ()
{
$DEBUG = $("#debug");
$DEBUG.append("Registering Events<br />");
$("#mup").click(moveUpItem);
$("#mdown").click(moveDownItem);
$("#mup").bind("dblclick", function ()
{
$DEBUG.append("Move Up Double-Click<br />");
});
$("#mdown").bind("dblclick", function ()
{
$DEBUG.append("Move Down Double-Click<br />");
});
});
function moveUpItem()
{
$DEBUG.append("Move Up Click<br />");
}
function moveDownItem()
{
$DEBUG.append("Move Down Click<br />");
}
</script>
<div id="debug" style="border: 1px solid red">
</div>
</body>
</html>
EDIT: I can confirm it is IE8 that is the problem. Swap this IE8-specific code in the $(document).ready() handler:
// $("#mup").click(moveUpItem);
$("#mup")[0].attachEvent("onclick", moveUpItem);
// $("#mdown").click(moveDownItem);
$("#mdown")[0].attachEvent("onclick", moveUpItem);
// $("#mup").bind("dblclick", function ()
$("#mup")[0].attachEvent("ondblclick", function ()
{
$DEBUG.append("Move Up Double-Click<br />");
});
// $("#mdown").bind("dblclick", function ()
$("#mdown")[0].attachEvent("ondblclick", function ()
{
$DEBUG.append("Move Down Double-Click<br />");
});

Example:
to move 3rd option before 1st option, we can use below jquery:
$('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)'));

I think this will give some ideas of how to do it, you can dynamically place any option before one known position just by knowing the values of both, the one to move and the one of the position:
How would you dynamically order an <option select> list using JQuery?

I know this one is a bit old, but I recently made this simple jQuery plugin to be able to reorder elements in a multiple select element.
Have a look and see if it helps for you, I tested in IE8,IE9,Chrome,FireFox,Opera.
http://fedegiust.github.io/selectReorder/