jQueryUI: Select dropdown not displaying correctly in tab layout - javascript

In this example I'm trying to create a tab layout, in which each tab will contain a dropdown list. I have to do it this way because there will be navigation between the tabs and initially only the first tab is enabled.
Unfortunately the dropdown list is not displaying correctly on the tabs that were disabled before. Instead of a full-sized dropdown list only a small piece of it can be seen (pic below). How to make it display in its full size?
The code example consists of HTML+JS and I'm using jQueryUI framework.
https://jsfiddle.net/fthjhfe8/3/
HTML:
<div id="tabs">
<ul>
<li class="ui-tabs-nav">TAB 1</li>
<li class="ui-tabs-nav">TAB 2</li>
<li class="ui-tabs-nav">TAB 3</li>
</ul>
<div id="tabs-1">
<select name="select1" id="select1">
<option disabled selected> -- select -- </option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div id="tabs-2">
<select name="select2" id="select2">
<option disabled selected> -- select -- </option>
<option>Option A</option>
<option>Option B</option>
</select>
</div>
<div id="tabs-3">
<select name="select3" id="select3">
<option disabled selected> -- select -- </option>
<option>Option I</option>
<option>Option II</option>
</select>
</div>
</div>
<input id="previous" type="submit" value="<< Previous">
<input id="next" type="submit" value="Next >>">
JS:
var $tabs = $('#tabs');
$tabs.tabs({ disabled: [1, 2] });
$("#select1").selectmenu();
$("#select2").selectmenu();
$("#select3").selectmenu();
$("#previous").button();
$("#next").button();
var minTabs=0;
var maxTabs=3;
var currentTab=0;
var activeTab=0;
function previous() {
if (currentTab==minTabs) {
return;
}
currentTab--;
$('#tabs').tabs("option", "active",currentTab);
}
function next() {
if (currentTab==maxTabs) {
return;
}
if ($('#select'+(currentTab+1)).val() === null) {
alert("A selection must be made!");
return;
}
currentTab++;
if (currentTab > activeTab) {
activeTab = currentTab;
}
$('#tabs').tabs('enable',currentTab).tabs("option", "active",currentTab);
}
$("#previous").bind('click', previous);
$("#next").bind('click', next);

The fact that calling jquery tabs would hide tab2 and tab3, the jquery would not be able to apply selectmenu() to the corresponding select tags. So you would need to add it before you enable jquery tabs.
var $tabs = $('#tabs');
$("#select1").selectmenu();
$("#select2").selectmenu(); // moved before calling $.tabs
$("#select3").selectmenu(); // moved before calling $.tabs
$tabs.tabs({ disabled: [1, 2] });
$("#previous").button();
$("#next").button();
var minTabs=0;
var maxTabs=3;
var currentTab=0;
var activeTab=0;
function previous() {
if (currentTab==minTabs) {
return;
}
currentTab--;
$('#tabs').tabs("option", "active",currentTab);
}
function next() {
if (currentTab==maxTabs) {
return;
}
currentTab++;
if (currentTab > activeTab) {
activeTab = currentTab;
}
$('#tabs').tabs('enable',currentTab).tabs("option", "active",currentTab);
}
$("#previous").bind('click', previous);
$("#next").bind('click', next);
https://jsfiddle.net/fthjhfe8/2/

Related

Multiple drop down boxes?

I'm trying to get multiple drop down boxes to open when selecting different prompts from an original drop down menu.
So for example the original drop box would say "Continent" then drop down to a list of continents, when you select a continent a new box opens that asks you "Country" then you select a country and a new drop box opens to select a state.
I've been using this template
<script type="text/javascript">
function CheckDepartment(val){
var element=document.getElementById('othercolor');
if(val=='others')
element.style.display='block';
else
element.style.display='none';}
function CheckOption(val){
var element=document.getElementById('misc')
if(val=='misc')
element.style.display='block';
else
element.style.display='block';
}
</script>
</head>
<body>
<select name="color" onchange='CheckDepartment(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<select name="othercolor" id="othercolor" onchange='CheckOption(this.value)' style='display:none;'/>
<option value=""></option>
<option value="hi">hi</option>
<option value="misc" id="misc" >misc</option>
</select>
<select name="third" style='display:none;'>
<option value=""></option>
<option value="first">first</option>
<option value="second">second</option>
</select>
but I can't get a third drop box to open when selecting an option from the second drop box.
edit: third box. I think i deleted my last try so this was kinda a recreation of it from what I remembered. I'm also incredibly new at all of this and don't know if anything I tried makes sense.
Here's a simplified demo.
(It assumes only a "yes" value should trigger the display of the next dependent dropdown.)
const
select1 = document.getElementById("select1"),
select2 = document.getElementById("select2");
document.addEventListener("change", handleDropdownDisplay);
function handleDropdownDisplay(event) {
let changedElement = event.target;
if ((changedElement != select1) && (changedElement != select2)) {
return;
}
if (changedElement.value == "yes") {
changedElement.parentElement.nextElementSibling.classList.remove("hidden");
} else {
changedElement.parentElement.nextElementSibling.classList.add("hidden");
}
}
div {
margin-bottom: 0.5em;
}
.hidden {
display: none;
}
<div>
<label for="select1">Show level 2?</label>
<select id="select1">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select2">Show level 3?</label>
<select id="select2">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select3">Would your rather</label>
<select id="select3">
<option value="brains">Eat monkey brains</option>
<option value="vba">Write code in VBA</option>
</select>
</div>
(Btw, level 3 doesn't automatically become hidden whenever level 2 becomes hidden. This is probably functionality you'll want to add.)

Show alert if two Select2 selects are selected

Let's say for example that I have two Select2 selects:
Select A
Option 1
Option 2
Select B
Option 1 Option 2
I want to capture an event when some option has been chosen for Select A and some option for Select B and then show a dismissible alert like alert alert-warning alert-dismissible fade show
I had thought to do it capturing the focus event but I have not been able to implement it, any ideas?
<label style="font-size: 20px;">SELECT A </label>
<select id="selectA" class="form-control" disabled>
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<label style="font-size: 20px;">SELECT B </label>
<select id="selectB" class="form-control" disabled>
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
I would like to implement something like this:
$(function () {
'use strict';
$('.dropdown').on('change', function (event) {
var selectedValue = $(event.currentTarget).val();
var matchedDropdowns = $('.dropdown').filter(function (index) {
return $(this).val() === selectedValue;
});
if (matchedDropdowns.length > 1) {
alert("Alert Alert!")
}
})
})
The problem is that this function only compares if the two selected values are equal. I need and event for when the two selected values of the selects are different than the default value 'All', but they don't necessarily have to be equal values.
The problem lies within your conditional. You need to check whether the 2 selects are NOT equal to the default value "All".
inequality / not equal operator: !=.
Read more about expressions and operators here.
HTML:
<div class="row d-flext justify-content-center">
<div class="col-md-4">
<label style="font-size: 20px;">SELECT A </label>
<select id="selectA" class="multi-select form-control">
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="col-md-4">
<label style="font-size: 20px;">SELECT B </label>
<select id="selectB" class="multi-select form-control">
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
jQuery:
$('.multi-select').on("change", function() {
var selectValA = $('#selectA').val();
var selectValB = $('#selectB').val();
if(selectValA != "All" && selectValB != "All") {
alert('The value of the two selects are no longer "All"');
}
});
Snippet:
$('.multi-select').on("change", function() {
var selectValA = $('#selectA').val();
var selectValB = $('#selectB').val();
if(selectValA != "All" && selectValB != "All") {
alert('The value of the two selects are no longer "All"');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row d-flext justify-content-center">
<div class="col-md-4">
<label style="font-size: 20px;">SELECT A </label>
<select id="selectA" class="multi-select form-control">
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="col-md-4">
<label style="font-size: 20px;">SELECT B </label>
<select id="selectB" class="multi-select form-control">
<option selected>All</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
Codepen example here.
I didn' test the code below. Just a kind of pseudo-code to describe what I meant in the comment.
// Handler get data from two select and check them
function handler() {
var data1 = $('#selectA').select2('data');
var data2 = $('#selectB').select2('data');
if (data1 && data2) {
alert("msg you want to show");
}
}
// trigger event only
$('#selectA').on('select2:select', function (e) { handler(); });
$('#selectB').on('select2:select', function (e) { handler(); });

click only the header not its specified children

I have this html
<div class="accordion_wrapper">
<div class="accordion_header">
<h1>Accordion Test</h1>
<select>
<option value="" selected disabled>Options</select>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3</option>
</select>
</div> <!-- end of accordion header -->
<div class="accordion_content">
<p>this is the accordion content</p>
</div>
</div> <!-- end of accordion wrapper -->
and this script
//already integrated the required jquery
//already on document ready
$('.accordion_header').bind({
click: function () {
var $sub = $(this).next('.accordion_content').stop(true, true);
if ($sub.is(':visible')) {
$sub.slideUp();
} else {
$sub.slideDown();
}
}
});
everything works, however if I click the select box (dropdown stuff) the click function of the .accordion_header is also triggered which I dont want it to trigger if I click the select box. Any clues, ideas, suggestions, recommendations, help to stop/prevent the .accordion_header being triggered when select box is click?
Below is my snippet
//already integrated the required jquery
//already on document ready
$('.accordion_content').hide();
$('.accordion_header').bind({
click: function () {
var $sub = $(this).next('.accordion_content').stop(true, true);
if ($sub.is(':visible')) {
$sub.slideUp();
} else {
$sub.slideDown();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion_wrapper">
<div class="accordion_header">
<h1>Accordion Test</h1>
<select>
<option value="" selected disabled>Options</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3</option>
</select>
</div> <!-- end of accordion header -->
<div class="accordion_content">
<p>this is the accordion content</p>
</div>
</div> <!-- end of accordion wrapper -->
You need to stop event propagation to child elements.
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$('select').click(function(e){
e.stopPropagation();
});

jQuery Mobile, Select All Items in an option list

Ok, so I have an issue selecting all items in a multiple select in jQuery Mobile.
Here's the fiddle: http://jsfiddle.net/u41yk3fy/
HTML:
<div data-role="page" id="one">
<div data-role="content">
<label for="sel">Select the Options</label>
<select name="sel" id="sel" data-native-menu="false" multiple="multiple">
<option value="1">Prod 1</option>
<option value="2">Prod 2</option>
<option value="3">Prod 3</option>
<option value="4">Prod 4</option>
<option value="5">Prod 5</option>
<option value="6">Prod 6</option>
</select>
<div class="floatright" data-role="controlgroup" data-type="horizontal">
Select All
Deselect All
</div>
</div>
</div>
Javascript:
function selectAll(select) {
if (select == false) {
$("#sel option:selected").removeAttr("selected");
} else {
$("#sel option").attr("selected", "true");
}
$("#sel").selectmenu("refresh", true);
}
$(document).ready(function () {
$('#selectall').click(function (event) {
return selectAll(true);
});
$('#deselectall').click(function (event) {
return selectAll(false);
});
});
Basically on Chrome, Opera and Safari this actually works. Using IE and Firefox if you select all and deselect all, attempting to select all again no longer works. I have a feeling that this might be a jQuery, jQuery Mobile or Javascript issue and not something I'm doing wrong. However, if I am doing something wrong I'd appreciate the input.
You can try this:
function selectAll(select) {
if (select == false) {
$("#sel").val([]);
} else {
$("#sel option").prop("selected", true);
}
$("#sel").selectmenu("refresh", true);
}
Here is a Demo.

force Select option to default on page load

I have a select box that uses JS to hide/show divs based on selection. The challenge I have is that when the page is reloaded it defaults to the last selection (and no associated div) rather than the default.
CSS:
#div1,#div2,#div3 {
display: none
}
JS:
function showHide(elem) {
if(elem.selectedIndex != 0) {
//hide the divs
for(var i=0; i < divsO.length; i++) {
divsO[i].style.display = 'none';
}
//unhide the selected div
document.getElementById('div'+elem.value).style.display = 'block';
}
}
window.onload=function() {
//get the divs to show/hide
divsO = document.getElementById("frmMyform").getElementsByTagName('div');
}
HTML:
<form action="#" method="post" id="frmMyform">
<select name="selMyList" onchange="showHide(this)">
<option value="">Select an option</option>
<option value="1">Show div 1</option>
<option value="2">Show div 2</option>
<option value="3">Show div 3</option>
</select>
<div id="div1">This is Div 1</div>
<div id="div2">This is Div 2</div>
<div id="div3">This is Div 3</div>
</form>
I tried setting #div0 to hidden and then adding it to the list of divs but it does'nt seem to work. Also tried using jquery but this is a WordPress site and one of the plugin's interferes with this functionality. This is very close to working perfectly, but just need to resolve this weirdness.
Any ideas?
Try to use selected attribute for option tag:
<select name="selMyList" onchange="showHide(this)">
<option value="" selected="selected">Select an option</option>
<option value="1">Show div 1</option>
<option value="2">Show div 2</option>
<option value="3">Show div 3</option>
</select>

Categories