Develop Reference

Using dropdown to show 2 different datatables

I've been working with an issue on my WordPress site for a bit now but I'm stuck. I have two working datatables (both showing on top of one another on the page currently) and a dropdown selection box. I need the dropdown box, which houses 2 options (one for each table) to select one table and show only that one.
Ideally I'd like the page to load with a default table (id="mytable") and then the dropdown can control everything from there.
Here is the code, other than the tables themselves:
<select name='tables' id='select-tables'>
<option value="mytable">Survey Test Table</option>
<option value="mytableSurvey">Survey Only</option>
</select>
//This is the code for the dropdown
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<script>
(function($) {
$('#select-tables').on('change', function(){
var table = $(this).find('option:selected');
$('#' + table).show();
$('table').not('#' + table).hide();
});
}(jQuery));
Both tables have their own datatable script:
//datatable 1, table id is mytable
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
$('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>
// table 2, table id is mytableSurvey
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytableSurvey').DataTable();
$('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>
Since this is in wordpress, I had to modify the JS for the dropdown code to match the datatable code so that it will work in WP. Is there a better way to code the dropdown with JS for existing datatables?

You have a lot of redundant code in their, so I'll also reduce a lot of the repetition for you.
<select name='tables' id='select-tables'>
<option value="mytable">Survey Test Table</option>
<option value="mytableSurvey">Survey Only</option>
</select>
//This is the code for the dropdown
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<script type="text/javascript">
(function($) {
$('#select-tables').on('change', function(){
var table = $(this).find('option:selected');
$('#' + table).show();
$('table').not('#' + table).hide();
});
}(jQuery));
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
$('#mytableSurvey').DataTable();
$('.dataTable').wrap('<div class="dataTables_scroll" />');
//open the #mytable table on page load and close 'mytableSurvey'
$('#mytable').show();
$('#mytableSurvey').hide();
});
}(jQuery));
</script>

Show a row's information into a right side div by clicking a table's row using jquery

For my recent project, I need to show data in a table. When I click on any row of the table, all the contents of the row will be shown in an additional div. See the code below:
<div class="left-side">
<table id="data">
<tr>
<td>cell(1,1)</td>
<td>cell(1,2)</td>
<td>cell(1,3)</td>
</tr>
<tr>
<td>cell(2,1)</td>
<td>cell(2,2)</td>
<td>cell(2,3)</td>
</tr>
<tr>
<td>cell(3,1)</td>
<td>cell(3,2)</td>
<td>cell(3,3)</td>
</tr>
</table>
</div>
<div class="right-side">
<!-- when a row is clicked, then the respective information is shown here-->
<!-- for example, if i click the first row, then it shows cell(1,1) and cell(1,2) and cell(1,3) and so on-->
</div>
Please suggest any idea of how to do it using jQuery or JavaScript.

var string = '';
$("#data tr").click(function() {
$(this).find("td").each(function(index) {
string += $(this).text();
});
document.write("<br/>" + string);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-side">
<table id="data">
<tr>
<td>cell(1,1)</td>
<td>cell(1,2)</td>
<td>cell(1,3)</td>
</tr>
<tr>
<td>cell(2,1)</td>
<td>cell(2,2)</td>
<td>cell(2,3)</td>
</tr>
<tr>
<td>cell(3,1)</td>
<td>cell(3,2)</td>
<td>cell(3,3)</td>
</tr>
</table>
</div>
<div class="right-side"></div>

Add a click event handler to your jQuery code:
<script type="text/javascript">
$(function() {
$("#data tr").click(function() { //Click event handler for the table column
var columnText = $(this).text(); //text from the column clicked.
$(".right-side").text(columnText); //Populates the .right-side div with the text.
});
});
</script>
Tip: If you know jQuery, then prefer jQuery over plain JavaScript. It'll lead to a much cleaner and concise code.

Just add a click function to your eg:
function showInrightDif(this)
{
var divtext=''
$(this).find('td').each(function() {
divtext = divtext + $(this).text;
});
$('.right-side').text(divtext);
}

add this code :
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$('#data tr').click(function () {
$('.right-side').text($(this).text());
});
</script>

Show a div on option selection

I have a selection menu (drop down list).
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
& the following div which located in somewhere in my page.
<div id="somediv">This is a string.</div>
I want to display the above div upon selecting the second item of the menu (id="two").
I have 2 questions: (1) What is the best way to keep this div hidden by default? I will just add display:none; to its styling, but maybe there is a better solution? (2) How can I make the div show up when the option of id="two" is selected? Any answer would be greatly appreciated.

So I wrote a simple jquery script that does what you described. Let me know if it fixes your problem. You can also do this with javascript, but I think jquery works for this just fine.
http://codepen.io/Francisco104/pen/vEPRgp
$('select').change(function(){
decide($(this));
});
var decide = function (elem) {
var touch = elem;
if (touch.val() === 'anything') {
return $('#somediv').css('display', 'block');
}
};

For hiding it by default, using style="display: none"is the easiest. You could do it using jquery $('div#somediv').hide(); but I don't see any benefit to that other than you possibly wanting to keep the show/hide logic together.
Here are two simple solutions using a change() event.
If div#somediv should be shown permanently when option#two has been selected:
$("select").change(function() {
if ($(this).val() == 'anything') $('div#somediv').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>
If div#somediv should be shown while option#two is selected and disappear if the user selects another option:
$("select").change(function() {
$('div#somediv').toggle($(this).val() == 'anything');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>
You should probably give an id to the select as well, to make the jQuery selector less brittle.

So, I'd have a class for the div, let's say, is-hidden and my CSS will have .is-hidden { display: none; }. Then, do the following.
HTML:
<div id="somediv" class="is-hidden">This is a string.</div>
JS:
$div = $("#somediv");
$("select").on("change", function() {
$div.is(".is-hidden") || $div.addClass("is-hidden");
//Option 1
if ($(this).find(":selected")[0].id === "two") {
$div.removeClass("is-hidden");
}
//Option 2 (same as above, but a bit shorter)
$(this).find(":selected")[0].id === "two" && $div.removeClass("is-hidden");
});

Here is what you can do:
in your html file:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
You'll need to import the JQuery library (which I show you there right above the <select> element) so that you can execute your script.
In your css file:
#somediv {
display: none;
}
and finally here is the script that will show the dive when "plane" is selected
$('select').change(function(){
$('#somediv').css('display','block');
});
Take a look at this JSFIDDLE I made for you.

1) You can hide the div initially giving the css property display:none; or by setting its display property using javascript which will run in initial load.
2) You can listen to the onchange event of the selectfield and check if value is 'anything' then show the div by changing its display style property to block and hidden in other cases.
document.getElementById("somediv").style.display='none';
var showHideDiv=function(selectField){
var divElement=document.getElementById("somediv");
if (selectField.value=='anything')
divElement.style.display='block';
else
divElement.style.display='none';
}
<select onchange='showHideDiv(this)'>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
<div id="somediv">This is a string.</div>

The simplest way to hide within HTML
<div hidden>content</div>
To display an hidden div
$(document).ready(function(){
$("select").change(function () {
$( "select option:selected").each(function(){
if($(this).attr("value")=="anything"){
$("#somediv").show();
}
});.
});

Display none works.
Have you tried keying into the onchange event? http://www.w3schools.com/jsref/event_onchange.asp?

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>

Using custom attribute jQuery selectors with dropdown select

I have a series of cascading drop downs that are populated with a database. I'm trying to pull the data from a row in my database once the final item in the series is selected. I gave the row a custom attribute, but can't seem to get the data from it. Here is a simple example of what I want to accomplish.
http://jsfiddle.net/WsrBX/
HTML
<body>
<div id="wrapper">
<form>
<div>no id</div>
<select>
<option>pick</option>
<option data-pick="33">with id</option>
</select>
<div id="there">has an id</div>
<div>nope</div>
</form>
</div>
<div id="yup"></div><!--value should appear here upon selection-->
</body>
JS
$('option[data-pick]').on('keyup change', function(){
var idString = $(this).attr('option[data-pick]');
$('#yup').text(idString);
});

HTML:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<body>
<div id="wrapper">
<form>
<div>no id</div>
<select id="sel">
<option>pick</option>
<option data-pick="33">with id</option>
</select>
<div id="there">has an id</div>
<div>nope</div>
</form>
</div>
<div id="yup"></div>
<!--value should appear here upon selection-->
</body>
JS:
$('#sel').on('keyup change', function () {
var idString = $('option:selected', this).attr('data-pick');
$('#yup').text(idString);
});
Working Demo

http://jsfiddle.net/WsrBX/1/
$('select').on('change', function(){
var idString = $(this).find("option:selected").attr('data-pick');
$('#yup').text(idString);
});

Several tips:
The change event only happens on <select>, and you cannot capture it on <option>.
The keyup event literally means keys of the keyboard, which may not be what you want.
Proper solution should be listening for change on <select>, and find the corresponding <option> using selectedIndex of <select> DOM element. Example below:
$('select').on('change', function(){
var idString = this.options[this.selectedIndex].getAttribute('data-pick');
$('#yup').text(idString);
});