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

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'));
});

Related

Remove characters between select elements

Hello this seems like a simple question but i can't figure a clean way to do this :
The aim of my developement was simply to remove some hour forms represented in a hh:mm:ss format.
I had to hide the selec entries for hours, minutes and seconds but i still have those 2 unhidden ugly ":" chracters remaining at the end of my selects and i can't figure a proper way to remove them !
Here is the HTML part generated by my JSP :
<span class="dateTime">
<script type="text/javascript">.....</script>
<script src="test.js" type="text/javascript</script>
<select id="x">
<option value="">Hour></option>
</select>
:
<select id="x">
<option value="">Minute></option>
</select>
:
<select id="x">
<option value="">Second></option>
</select>
</span>
I can't modify this code as it generated in my jsp which is using standard classes. I would prefer to do this in javascript directly in my JSP like i did to hide the time fields.
You can do something like that :
var dateElement = document.getElementById('dateElem');
dateElement.childNodes.forEach(function(node){
// check if the node is a text node
if (node.nodeType === 3)
dateElement.removeChild(node);
})
I have to admit that it is not very nice but it works... :p You can be more precise on which node you delete as well ;)
PS: I assumed you can put an id on the element... if you cant, just get the element thanks to the className or try to find a way ;)

How to display different images with jQuery when an option is selected

How to display different images when an option is selected?
Here is my markup:
<select name="brand-range">
<option value="Brand1">BFS</option>
<option value="Brand2">FS</option>
<option value="Brand3">PS</option>
</select>
<div class="option-image" id="thumbs">
<div id="bfs"><img src="images/hotel0.jpg"/></div>
<div id="fs"><img src="images/hotel1.jpg" /></div>
<div id="ps"><img src="images/hotel2.jpg" /></div>
</div>
I'm looking for a jQuery solution.
Any suggestions highly appreciated!
Based on your HTML code, i've written script, since option text and image div id value is same i've written script based on that. Refer and the code do changes accordingly.
Here on change of dropdown, i'm getting options values and since images parent div's value are id are same i'm getting that element and changing its css.
Note: you have to change your HTML structure so that you can make changes through jquery accordingly.
$("#brandrange").bind("change", function() {
var image_element = ($("option:selected").text()).toLowerCase();
$("#thumbs").find("div").css("display", "none");
$("#thumbs").find("#" + image_element).css("display", "block");
});
Here is JSfiddle link https://jsfiddle.net/90sybgyw/1/

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>

Sort order for ecommerce page using javascript (a/b-test)

Can javascript help me change the default sort order for an ecommerce category page? I'm running an a/b-test, and in the variation1 I'd like to have the sorting option "Newest" as the page default instead of "Most Popular". What kind of Javascript would change the sort order when the page is loaded?
The select ID's are as follows, currently the "Most Popular" is the default:
<select id="all-sort" class="ordering-select " name="sortAllProducts">
<option value="name.asc">Name (asc)</option>
<option value="name.desc">Name (desc(</option>
<option value="discountedPrice.asc">Min Price</option>
<option value="discountedPrice.desc">High Price</option>
<option value="lastStatusChange.desc">Newest</option>
<option value="viewCount.desc" selected="selected">Most Popular</option>
</select>
I tried changing the html-code (selected="selected") from Most popular to the "Newest" option using the the a/b-testing tool (visual website editor), but it didn't work, Most popular was still loaded as default. I think a Javascript is needed to load the code-change in the a/b-testing tool overriding the current default?
I'd really appreciate help, and I'm very sorry if this is an silly question, that has been answered a million times :/
I also tried looking for solutions and found couple of similar questions, but those unfortunately didn't give me the answer. I'm not very tech savy.
Javascript to sort contents of select element
How to show <Select > in sorted order (this was very close, but I didn't get it working).
Thanks!
Try:
$(function(){
$("#all-sort")[0].selectedIndex = 4;
});
Working fiddle: http://jsfiddle.net/fyL2efom/

Opening Link via New Window from Javascript Select List

I'm not sure what's the issue that is causing that error message when I try debugging with Firebug. Everything looks good to me.
Current Issue:
$("#SlideList option:selected") is null
Select Box Code (abridged) :
<select id="SlideList" name="D1" style="width: 130px;">
<option value = "Numbers.pdf" >Numbers</option>
</select>
<img src="Button.png" onclick="SlidePDFOpen()" />
Javascript:
function SlidePDFOpen() {
window.open($("#SlideList option:selected").val());
}
You are using a jquery selector but you don't have jquery included in the page.
The error you are getting therefore makes sense as the page can't find the function val().
At the very least with jquery you would get an empty string.

Categories

Resources