Jquery function to split option list into hierarchical select - javascript

I have list that looks like this:
<select>
<option value="All" selected="selected">- Any -</option>
<option value="16">Africa</option>
<option value="17">Asia</option>
<option value="56">-China</option>
<option value="57">-Japan</option>
<option value="19">Canada</option>
<option value="20">-Alberta</option>
<option value="21">-British Columbia</option>
<option value="22">-Manitoba</option>
<option value="23">-New Brunswick</option>
<option value="24">-Newfoundland & Labrador</option>
<option value="25">-Northwest Territories</option>
<option value="26">-Nova Scotia</option>
<option value="27">-Nunavut</option>
<option value="28">-Ontario</option>
<option value="29">-Prince Edward Island</option>
<option value="30">-Quebec</option>
<option value="31">-Saskatchewan</option>
<option value="32">-Yukon</option>
<option value="33">Central & South America</option>
<option value="34">Europe</option>
<option value="35">Republic of Ireland</option>
<option value="36">United Arab Emirates</option>
<option value="37">United Kingdom</option>
<option value="38">-England</option>
<option value="39">-Northern Ireland</option>
<option value="40">-Scotland</option>
<option value="41">-Wales</option>
</select>
I can't change the HTML, but need to split the select into two selects by jQuery first the show the top level choices then for example if Canada was chosen show a second drop down with the provinces. This has to be dynamic as the underlying list might change with the time.
I understand that it would be much easier if there would be optgroups but unfortunately this is out of my control. So basicly i need to convert this simple list into hierarchical select in the browser.

You can use below query to split continents and countries select box.
NOTE - put id="select" for main select box.
$(function(){
var continent='';
$('#select option:gt(0)').each(function(){
var value = $(this).val();
//check if option text don't have '-' in it, then take it as
// continent and create a select box with same id
if($(this).text().indexOf("-")==-1 && continent!=value)
{
continent=value;
$('#select').after('<select id="'+continent+'" style="display:none" class="country"></select>');
}
else
{
//add option to the newly created select box
$('#'+continent).append($(this));
}
});
//remove all country select box which are empty
$('.country').filter(function(){
return $(this).children().length ==0;
}).remove();
//bind change event to select box to show / hide country select box
$('#select').change(function(){
$('.country').hide();
$('#'+$(this).val()).show();
});
});
DEMO

Related

How to show/hide items from a select list based on another selection

In JavaScript, how to show/hide items from a select list based on another selected option that contain a certain word or words?
I am very new to JavaScript, so any help would be appreciated.
There are two drop-downs: "group" and "alph".
<select name="group">
<option value="Angry (Two)">Angry (Two)</option>
<option value="Happy (Two)">Happy (Two)</option>
<option value="Sad">Sad</option>
<option value="Tired (One)">Tired (One)</option>
</select>
<select name="alph">
<option value="ABC">ABC</option>
<option value="ABC-1">ABC-1</option>
<option value="ABC-2">ABC-2</option>
<option value="DEF">DEF</option>
<option value="DEF-1">DEF-1</option>
<option value="DEF-2">DEF-2</option>
<option value="DEF-3">DEF-3</option>
</select>
Without IDs, for the first dropdown (name group), if the selected value contains " (Two)", then the list will only show:
<select name="alph">
<option value="ABC-2">ABC-2</option>
<option value="DEF-2">DEF-2</option>
</select>
If the user changes selection, and the selected value contains " (One)", then the list will only show:
<select name="alph">
<option value="ABC-1">ABC-1</option>
<option value="DEF-1">DEF-1</option>
</select>
If the user changes selection, and the selected value does not contain neither " (One)" or " (Two)", then the list will show:
<select name="alph">
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
<option value="DEF-3">DEF-3</option>
</select>
Note: I am not able to add IDs or attributes. I can only access the name of the select and the value.
Use data-* to create groups, then use a querySelector to get all the options and test if they are apart of the group or not. If they are apart of the group show them otherwise hide them.
// The main group
let groups = document.querySelector('select[name=group]')
// Add a change event
groups.addEventListener('change', (e) => {
// Get the currently selected Group
let current = e.target.options[e.target.selectedIndex]
// Get the data-group number
let group = current.getAttribute('data-group')
// Get all the items from the second dropdown
let opts = Array.from(document.querySelectorAll('select[name=alph]>option'))
// Hide items that are not appart of the group
opts.forEach(itm => itm.style.display = itm.getAttribute('data-group') == group || !itm.getAttribute('data-group') ? 'initial' : 'none')
// Reset the the selection
document.querySelector('select[name=alph]').selectedIndex = 0
})
/* Hide option two items by default */
select[name=alph]>option[data-group]{display:none;}
<select name="group">
<option>Select One...</option>
<option data-group="1" value="Angry (Two)">Angry (Two)</option>
<option data-group="2" value="Happy (Two)">Happy (Two)</option>
<option data-group="3" value="Sad">Sad</option>
<option data-group="4" value="Tired (One)">Tired (One)</option>
</select>
<select name="alph">
<option>Select One...</option>
<option data-group="1" value="ABC">ABC</option>
<option data-group="1" value="ABC-1">ABC-1</option>
<option data-group="2" value="ABC-2">ABC-2</option>
<option data-group="2" value="DEF">DEF</option>
<option data-group="3" value="DEF-1">DEF-1</option>
<option data-group="3" value="DEF-2">DEF-2</option>
<option data-group="4" value="DEF-3">DEF-3</option>
</select>

Jquery change multiple select buttons with a select button

I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/

Select on Change will change another select html javascript or jquery

I have a select like this
<select name="category" >
<option value="0" selected>Select a Manufacturer</option>
<option value="10">Acer Technologies</option>
<option value="2">Alcatel</option>
<option value="14">Apple Iphone</option>
<option value="4">Azumi</option>
<option value="12">HTC Corporation</option>
<option value="8">Huawei</option>
<option value="5">LG Electronics</option>
<option value="11">Motorola</option>
<option value="9">Nokia Microsoft</option>
<option value="1">Samsung</option>
<option value="6">Sony Ericsson</option>
<option value="3">Zhong Xing ZTE</option>
</select>
And another select HIDDEN like this
<select name="manufacturer" >
<option value="none" selected>Select a Manufacturer</option>
<option value="Acer Technologies">Acer Technologies</option>
<option value="Alcatel">Alcatel</option>
<option value="Apple Iphone">Apple Iphone</option>
<option value="Azumi">Azumi</option>
<option value="HTC Corporation">HTC Corporation</option>
<option value="Huawei">Huawei</option>
<option value="LG Electronics">LG Electronics</option>
<option value="Motorola">Motorola</option>
<option value="Nokia Microsoft">Nokia Microsoft</option>
<option value="Samsung">Samsung</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Zhong Xing ZTE">Zhong Xing ZTE</option>
</select>
Both selects are almost the same value, the first one is to save the manufacturer as category and the second one is to save the manufacturers name
The first one is visible while the second one is hidden ( display:none )
What I need is:
If the user select in select one for example
<option value="2">Alcatel</option>
In some way the hidden display:none select must be autoselected to
<option value="Alcatel">Alcatel</option>
Any way to do this?
I already have Jquery running other functions on the site
Thanks
Use change function:
$( "select[name='category']" ).change(function(e) {
$( "select[name='manufacturer']" ).val( $(this).find( "option:selected" ).text() );
});
But if option text in category select do not match option value in manufacturer select - code will not work.

Dynamically removing options from select box

I want to dynamically remove options from a select box..
<select name="goal1">
<option value="1">Fat Loss</option>
<option value="2">Competition Prep</option>
<option value="3">Marathon Training</option>
<option value="4">Lean Mass</option>
<option value="5">Triathlon Training</option>
<option value="6">HIIT Training</option>
<option value="7">LISS Training</option>
</select>
<select name="goal2">
<option value="1">Fat Loss</option>
<option value="2">Competition Prep</option>
<option value="3">Marathon Training</option>
<option value="4">Lean Mass</option>
<option value="5">Triathlon Training</option>
<option value="6">HIIT Training</option>
<option value="7">LISS Training</option>
</select>
<select name="goal3">
<option value="1">Fat Loss</option>
<option value="2">Competition Prep</option>
<option value="3">Marathon Training</option>
<option value="4">Lean Mass</option>
<option value="5">Triathlon Training</option>
<option value="6">HIIT Training</option>
<option value="7">LISS Training</option>
</select>
There are, as you can see, three of these select boxes on the page with the exact same options, is there any way to dynamically remove options of the other select boxes based on selections made from the others.
So for example, if in the first of three select boxes, I choose 'Fat Loss', is there any way to remove that option from the other 2 select boxes to avoid duplication in the input?
Then if an option gets unselected, the option needs to reappear in the other select boxes..
Yes there is. Check this JSFiddle. When selecting an item in one of the three dropdown boxes, the options are removed from the other two.
$(document).ready(function () {
$("select").on("change", function () {
// Show all options
$("option").show();
// Get an array of all current selections
var selected = [];
$("select").each(function () {
selected.push($(this).val());
});
// Remove all selected options, except the current showing one, from all lists
$("select").each(function () {
for (var i = 0; i < selected.length; i++) {
if (selected[i] != $(this).val()) {
$(this).find("option[value='" + selected[i] + "']").hide();
}
}
});
});
});
Edit: I've updated the fiddle with a new version which lets options reappear when they get unselected in other lists. Not sure if it's the best way of doing this though...

how to select a particular drop down option element

I want to use this function to work on all my drop down lists. Problem: the first drop down works okay, but hen I try select any option in the 2nd drop down selections. It places the value from the first group in the span of the second group. I want the span to have the value from its own group. I would like to use this on multiple groups.
<script>function displayResult(xspan,xselect)
{
var x=document.getElementById(xselect).selectedIndex;
alert(x);
var newTxt = document.getElementsByTagName("option")[x].value;
document.getElementById(xspan).innerHTML = newTxt;
//alert(document.getElementsByTagName("option").length);
}
</script>
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
<option value="">Phone Numbers</option>
<optgroup label="Shipping">
<option value=" - 800-463-3339">FedEx</option>
<option value=""></option>
</optgroup>
</select>
<span id="ShowPhone"></span>
<select id="myParts" onchange="displayResult('ShowParts','myParts')">
<option value="">Qik Parts list</option>
<optgroup label="BATT">
<option value="1">1</option>
<option value="2">1</option>
<option value="2">1</option>
<option value="2"><1/option>
</optgroup>
</select>
<span id="ShowParts"></span>
Chage the id and the displayResult of the second dropdown:
First dropdown:
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
Second dropdown:
<select id="NewNameID" onchange="displayResult('ShowPhone','NewNameID')">

Categories