Develop Reference

Simple jquery/javascript dropdown menu with 2 outputs (1 img, 1 title)

Please forgive me I'm self-taught with large pockets of knowledge missing ><
I found some code (probably from you guys here at Stockoverflow!) and managed to get it to work in my site. There is only 1 change I need to make to my jquery but it's not working when I do it.
This is the unchanged version
(the dropdown list is what I am working on)
HTML
<div class="prints">
<div><img class="printShop" src="art_images/anime_art_prints/p000a.png" name="image-swap"></div>
<div><span class="titleName" name="title-swap">Title of Artwork</span></div>
<div>
<select name="printchoice" id="printchoice">
<option data-tname="Select" value="art_images/anime_art_prints/p000a.png">Please Select your Print</option>
<option data-tname="Selected One" value="art_images/anime_art_prints/p000b.png">A Sassy Catgirl</option>
<option data-tname="Selected Two" value="art_images/anime_art_prints/p000c.png">Mermaid Friends</option>
<option data-tname="Selected Three" value="art_images/anime_art_prints/p000d.png">Galaxy Girl</option>
</select>
</div>
</div>
JS
$(document).ready(function(){
$("#printchoice").change(function(){
$("img[name=image-swap]").attr("src",$(this).val());
});
$("#printchoice").change(function(){
$("span[name=title-swap]").html($(this).val());
});
});
This works how I want it, but it puts the text of the option's value="" into the title span. I want the options data-tname="" text to show instead. I tried to replace val() with data('tname') in the second paragraph to no avail. that just seems to break it :(
If it isn't too much of your time, could you take a quick look and see if it is something super simple that I need to change that can make it work how I need it to?

$("#printchoice").change(function(){
$("img[name=image-swap]").attr("src",$(this).val());
$("span[name=title-swap]").html($(this).find('option:selected').attr('data-tname'));
});

Dynamically adding checkboxes to multiselect dropdown

I have been stuck on this problem for hours and I am going mad ! I need a dropdown of checkboxes - which I populate dynamically into a select tag. I also need to append each multiselect dropdown that I deep-clone with jquery to a number of <div> elements. However, every time I do this the cloned element is rendered as a list of multiselectable items (and not as a dropdown and loses all its styling). This is the multiselect container that I would like to add my checkboxes to:
<select class="multiselect1" multiple="multiple">
</select>
I finally initialize each cloned dropdown by calling .multiselect(); The library I am using for this is: http://davidstutz.github.io/bootstrap-multiselect/
$('.multiselect1').multiselect();
var filterClone = $('.multiselect1').clone(true);
//filterClone.multiselect();
$('body').append(filterClone[0]);
When the above lines execute, the select element is indeed present in the body but is invisible. When I remove the style attribute the element becomes visible but is rendered as a list of multiselectable items (which is expected). But why is the cloned multiselectable dropdown not displayed at all in the first place ?
Any suggestions that could lead me to a solution (or the solutions itself!) using javascript or jquery would be most appreciated.

Well to make this work you need JQuery. Did you include JQuery? If you didn't you can use this: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> Did you upload all the files to your server?
Try this code on your website. Does it work?
HTML:
<select id="SOExample" multiple="multiple">
<option value="Love it!">Love it!</option>
<option value="Hate it!">Hate it!</option>
<option value="I don't know...">I don't know...</option>
</select>
JS:
<script type="text/javascript">
$(document).ready(function() {
$('#SOExample').multiselect();
});
</script>

Display Block and Display None with Option Value

I'm trying to create a toggle that will display:block and display:none for different blocks of code similar to the code box at lob.com beside "
An intuitive RESTful API".
I have been trying to get this to work based of this jsfiddle but I can't get it to work but I'm not sure if this code is what I need to achieve what's done at lob.com
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
JavaScript:
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
Ultimately it will need to be able to toggle between the two drop downs like on lob.com so there would be 8 sets of divs if there were 4 options on the left and then 2 on the right.
Could anyone point me in the right direction to learn how to do this as I'm not sure if I should be using JQuery or not. Basically I'd like to know exactly how lob.com did it so I can go down the right road!
Thanks if anyone can point me.

The website lob.com is build up with alot of pre's inside a container. Start with the HTML:
<pre class="jayOption prettyprint" style="display: none;"><code>Jay</code></pre>
<pre class="samOption prettyprint" style="display: none;"><code>Sam</code></pre>
<pre class="admOption prettyprint" style="display: none;"><code>Admin</code></pre>
Adding your selectbox:
<select id="getFname" onchange="admSelectCheck(this);">
<option value="jayOption">Jay</option>
<option value="samOption">Sam</option>
<option value="admOption">Admin</option>
</select>
we can toggle the <pre> elements with the following code:
function admSelectCheck(nameSelect)
if(nameSelect.value){
var preElements = document.getElementsByClassName('prettyprint');
for(var i=0; i < preElements.length; i++){
//if the class contains the selected value, then show it, else hide it
preElements[i].style.display = preElements[i].classList.contains(nameSelect.value)?'block':'none';
}
}
}
Making use of classList
fiddle

You can't hide an element of a dropdown list like that. Try setting it's "disabled" attribute instead. Either that, or recreate the list dynamically.

I forked your jsfiddle to give an example of how you might acheive this using a naming convention on the divs like
<div id="admDivCheck0" style="display:none;">
corresponds to the value in
<option id="admOption" value="0">Admin</option>
http://jsfiddle.net/v7Rmh/ here is the fiddle :D

How to load a text file using JavaScript with a HTML combobox (<select>)?

First of all, thanks for reading the topic.
Now, I'm making a website using HTML5 and I need to load a text file according to the user choice in a combobox. I mean, the user selects an option from the combobox and the text from it should shown on a specific cell of a table. The number of times that the user wants without refreshing the site.
The problem is that the code is not working. The code:
The HTML for the combo box:
<select id = "comboSelect">
<option value="text1.txt">text1</option>
<option value="text2.txt">text2</option>
<option value="text3.txt">text3</option>
<option value="text4.txt">text4</option>
<option value="text5.txt">text5</option>
</select>
The HTML for the table cell:
<td colspan="5" class="text" id = "cuadroTexto"></td>
The JavaScript that does the rest of the work:
$(document).ready(function(){
document.getElementById("comboSelect").addEventListener('change',function () {
$(document.getElementById("cuadroTexto")).load(value);
alert("Cargado");
},false);
});
Edit 1:
I think that the JavaScript is not recognizing the change event from the combobox.
I'm yet not working with a server.

Check this is working
CODE
$(document).ready(function(){
$("#comboSelect").change(function () {
$("#cuadroTexto").load(this.value);
alert($(this).val())
});
});
Fiddle http://jsfiddle.net/krunalp1993/Qr6GK/

Hide/Display tables after selecting different options

I have 2 tables "iu" and "si" and I put a dropdown list for users to select which one they want to see. Once the option is selected, the corresponding table will appear.
Another one is supposed to be hidden but when the page is loaded, default table "si" is shown.
Here is my JavaScript code:
<script>
$(document).ready(function()
{
$('#iu_table').hide();
});
$('#iu').onchange=function()
{
$('#si_table').hide();
$('#iu_table').toggle();
}
</script>
And HTML code:
<select>
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
The table ID is "si_table" and "ui_table" respectively.
I used the code above but it doesn't work. No matter which one I select, only the "si" table is shown.
I hope that someone could help.

You should probably work with the Tutorials of jQuery and familarize yourself with the workings of the libraries.
There are multiple errors in your code:
There is no field onchange. What you want is the change function of jQuery, which is described here: http://api.jquery.com/change/
The code for the change function belongs into the $(document).ready function, so jquery executes it, when the document is loaded. The code has to be executed there, so that the function is called when the select is changed.
You want to work with the change of the select not with the change of the option.
In the body of your change function you hide the one table and toggle other: toggle both, so the first can be shown too, when the option is selected. Also this construct only works for exactly 2 options. If you want more options, you have to work something out like in the answer of Paritosh.
Here is a working sample:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function()
{
$('#iu_table').hide();
$('#selector').change(function()
{
$('#si_table').toggle();
$('#iu_table').toggle();
});
});
</script>
</head>
<body>
<div id="si_table">si</div>
<div id="iu_table">iu</div>
<select id="selector">
<option id="si" selected="selected">SI</option>
<option id="iu">IU</option>
</select>
</body>

There are many ways of achieving this. One is below - I have added id attribute to dropdown control
<select id="myselection">
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
<script>
$('#myselection').bind('change', function(){
if($('#myselection option:selected').attr('id') == "si"){
$('#si_table').show();
$('#iu_table').hide();
}
else if($('#myselection option:selected').attr('id') == "iu"){
$('#si_table').hide();
$('#iu_table').show();
}
});
</script>

There is a method in jQuery which does hide/show matched elements called toggle()
As you need to hide the IU table at first, you may need some css trick for that. So put display:none; for the IU table and do toggle on changing the dropdown values. Working fiddle is here