I have 16 fields that need to be sorted by state. Originally, I made it so that there was four different divs because there's four different states people can choose from.
However, I ran into the issue of emails not going to the right people because the 16 fields are agents that people can choose and those agents need to have an email sent to them if they're chosen.
I keep finding multiple solutions for showing and hiding different divs but how do I hide or show options in a single sub-drop down menu?
Parent Dropdown Menu
State 1
State 2
State 3
State 4
Agent Dropdown Menu
Agent 1
Agent 2
Agent 3
Etc (all the way to agent 16)
How can I make it so that when a user selects State 1, it only shows a few options from the agent dropdown menu? The only solutions I can find are ones that have you split the sub-menu into different divs. We're using Contact Form 7 and the only thing people can see are the names but the emails are attached and those agents have to get an email when someone selects them.
HTML:
<select onchange="changeValues()" id="main-dd">
<option value="0">State 1</option>
<option value="1">State 2</option>
<option value="2">State 3</option>
<option value="3">State 4</option>
</select>
<select id="agent-dd"></select>
Javascript:
var AgentDDValues = [
['Agent 1','Agent 2'],
['Agent 3'],
['Agent 4'],['Agent 5'],
['Agent 6'],['Agent 7'],['Agent 8']
];
function changeValues(){
var e = document.getElementById("main-dd");
var selVal = e.options[e.selectedIndex].value;
$("#agent-dd").empty();
for(var i=0;i<AgentDDValues[selVal].length;i++){
$("#agent-dd").append('<option>'+AgentDDValues[selVal][i]+'</option>');
}
}
You can trigger off the change state in a select dropdown and hide options in the second one
HTML
<select id="s1">
<option disabled selected>pick an option</option>
<option data-id="1">option 1</option>
<option data-id="2">option 2</option>
</select>
<select id="s2">
<option class="1">sub option 1</option>
<option class="1">sub option 2</option>
<option class="1">sub option 3</option>
<option class="1">sub option 4</option>
<option class="2">sub option 5</option>
<option class="2">sub option 6</option>
<option class="2">sub option 7</option>
<option class="2">sub option 8</option>
</select>
Javascript/Jquery
$("#s1").on("change", function(){
var id = $("#s1 :selected").data("id");
if(id == 1){
$(".1").show();
$(".2").hide();
}
if(id == 2){
$(".1").hide();
$(".2").show();
}
});
Have a look at this fiddle I created
UPDATE:
In response to your comments you can add classes via Jquery like this:
var count = 0;
$("#s2 option").each(function(){
if(count < 4){
$(this).addClass("1");
}
else $(this).addClass("2");
count++;
});
This just uses a simple counter to add a "1" class to the first half of the options and then switch over to a "2" class for the second half.
Related
I am trying to use the code below so website users have the option to select which database they'd like to search from a list of drop-down menu options. The code works just fine, but users are able to submit a search when the drop-down menu is set to the default selection which results in an error. I only want users to be able to submit a search if they select Option 1, Option 2, etc. from the drop-down menu.
Is there a way to accomplish this? Thanks in advance!
<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
</script>
<form name="searchform" onSubmit="return dosearch();">
Search:
<select name="sengines">
<option value="" disabled selected>Select an option by category</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
For:
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
</form>
Step 1
First, you should assign different values to each dropdown options. Right now, all options have the same value "", so you can not differentiate among selected options.
<option value="option_0" disabled selected>Select an option by category</option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
Step 2
In dosearch() function, check if the selected option is different than option_0. If it is, then perform the search. If it is not, alert the user that he should select the option from dropdown first.
function dosearch() {
const sf = document.searchform;
const selected_option = sf.sengines.options[sf.sengines.selectedIndex].value;
if (selected_option === "option_0") {
alert('Choose an option from dropdown first.')
} else {
const submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
}
Working example
I am honest, I'm not a Javascript expert. What I want to achieve is to deactivate one or more <option> in the Second Dropdown based on the selection in the First Dropdown
I checked a lot of other answer here but I was not able to adapt them to my code.
<select name="ptp_filter_doc_category" data-column="doc_category" data-tax="doc_category" data-search-column="doc_category_hfilter" aria-label="Category">
<option value="">Category</option>
<option value="category-one">Category 1</option>
<option value="category-two">Category 2</option>
</select>
<select name="ptp_filter_tag_one" data-column="tag_one" data-tax="tag_one" data-search-column="tag_one_hfilter" aria-label="Tag 1">
<option value="">Tag</option>
<option value="tag-1">Tag 1</option>
<option value="tag-2">Tag 2</option>
<option value="tag-3">Tag 3</option>
<option value="tag-4">Tag 4</option>
<option value="tag-5">Tag 5</option>
<option value="tag-6">Tag 6</option>
</select>
What I want to achieve is:
if Category 1 is selected -> Tag 3, Tag 4, Tag 5, Tag 6 are deactivated
I tried this:
if ($('option[value=category-1]').prop('selected', true)) {
$('option[value=tag-3]').prop('disabled', true);
}
Your javascript code will not work because the filtering checks for the wrong value. It should be:
if ($('option[value=category-one]').prop('selected', true)) {
$('option[value=tag-3]').prop('disabled', true);
}
And you may want to use data tags in the tag options to specify for which categories they should be enabled/disabled, so the link between category and tag is not as fixed.
I have a problem with select menu on my html page (bootstrap, jquery, js). On my requirement, the select menu (see the pictures below) should, at the first time show only 1,2,3 and others and if the user chooses "others" a sub menu should appeare on the same select menu allowing the user to choose 4 and 5 options without hiding the old menu.
I tried to do it with some Jquery code (by appending the 4 and 5 options when the user clicks on other option) the problem is the select is closed when I choose the other option.
<select name="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="others">Others</option>
</select>
$(function(){
$('select[name=mySelect]').on('change', function(){
var selected = $(this).val();
if(selected && selected == 'others'){
$(this).children().last().remove();
$(this).append('<option value="4">4</option><option value="5">5</option>');
$(this).click();
}
});
});
How to disable the select closing when the user clicks on "Other" option?
Fore example like this.
HTML:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="Others">Others</option>
</select>
JQuery:
$("select").change(function() {
if($(this).val() == "Others") {
$(this).append("<option value='5'>5</option>").find("option:selected").text("4").val("4");
}
});
https://codepen.io/anon/pen/opMwvp
To disable closing the select, see this answer
I want to check if a selectbox has selected an item or is empty. If option is selected no problem, I can use
$('main_user_selector_selectbox').find('option:selected').val() to get the value or $('main_user_selector_selectbox')find.('option:selected').text() to get the text.
Issue is, when nothing is selected I always receive the information of first option.
<select class="main_user_selector_selectbox" name="main_user_select_box">
<option value="US20160622053653am"> Beckenbauer, Franz </option>
<option value="US20160618044520am"> Engel, Laura </option>
<option value="US20160618094232am"> Gonzaga, Bengie </option>
<option value="US20160623055042am"> Neureuter, Walter </option>
<option value="US20160618050746am"> Rosenberger, Trude </option>
<option value="US20160622102555am"> Schuhmacher, Michael </option>
<option value="US20160618063016am"> Tinay, Decebil </option>
<option value="US20160615115928am"> Weiss3, Katrin </option>
</select>
I tried this script with datatables to receive some information to allow or disallow selection of rows in datatable.
var table = $('#rights_grid').DataTable();
table.on( 'select' , function () {
var user_id = $(".main_user_selector_selectbox").find('option:selected').val();
alert(user_id);
}
)}
Add an empty value as the first item in your select box
<option value=""></option>
Now you can simply check for the value of the select box. It will return nothing if none is selected.
$('.main_user_selector_selectbox').val()
My website is created in ASP classic - VBScript (not my choice and is a language I've not had experience with before this). I'm trying to create a webpage where in it: A dropdown menu reveals an additional dropdown based on what was selected in the first one. I'm trying to use a javascript function to achieve this.
Example:
In the first dropdown the user chooses ice cream or crisps.
Based on what the user selects another dropdown gives the choice of flavour.
Ice cream: vanilla, chocolate, mint.
Crisps: ready salted, cheese & onion, salt & vinegar.
This is what my code currently looks like:
HTML
<select id="food" onchange="fctCheck(this.value)">
<option value="">Choose an item</option>
<option value="icecream">Ice cream</option>
<option value="crisps">Crisps</option>
</select>
<select id="icecream" style="display:none">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="mint">Mint</option>
</select>
<select id="crisps" style="display:none">
<option value="readysalted">Ready Salted</option>
<option value="cheeseandonion">Cheese and Onion</option>
<option value="saltandvinegar">Salt and Vinegar</option>
</select>
.
javascript
function fctCheck(food)
{
if (food == "")
{document.getElementById(food).style.display = "none";}
else
{document.getElementById(food).style.display = "block";}
}
as mentioned by st3inn this.value is absolutely fine - there is just the typo by document.getElement==>B<==yId.
But your code has the disadvantage, that a user could select both options and so both sub-selections would be visible.
You could avoid this by first hiding all sub-selections before showing the one for the selected item. This could be done that way (via the addiotional name-attribute, or, if you choose to work with jQuery you could do something more sophisticated instead):
Example (with comments) on JSFiddle
Javascript:
function fctCheck(food) {
var elems = document.getElementsByName("subselector");
for (var i = 0; i < elems.length; i++) {
elems.item(i).style.display = "none";
}
document.getElementById(food).style.display = "block";
}
HTML:
<select id="food"onchange="fctCheck(this.value);">
<option value="">Choose an item</option>
<option value="icecream">Ice cream</option>
<option value="crisps">Crisps</option>
</select>
<select id="icecream" name="subselector" style="display:none">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="mint">Mint</option>
</select>
<select id="crisps" name="subselector" style="display:none">
<option value="readysalted">Ready Salted</option>
<option value="cheeseandonion">Cheese and Onion</option>
<option value="saltandvinegar">Salt and Vinegar</option>
</select>
Cheers,
Florian
You need to check for option value instead:
fctCheck(this.options[ this.options.selectedIndex ].value)
this.options is collection of <option> elements inside your current <select>, and this.options.selectedIndex is integer value that show what option currently selected.
BTW you have an typo in your code:
document.getElementbyId
should be
document.getElementById
See jsFiddle demo
You just have a typo.
function fctCheck(food)
{
if (food == "") {
document.getElementById(food).style.display = "none";}
} else {
document.getElementById(food).style.display = "block";
}
}
should work.
this.value
is equivalent to
this.options[this.options.selectedIndex].value