Auto Select First Dropdown Option - javascript

Based on this codes: http://jsfiddle.net/3UWk2/3/
<select size="1" id="Rank" title="" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="airman">Airman</option>
<option value="senior-airman">Senior Airman</option>
</select>
<div class="container">
<div class="airman">
<select class="second-level-select">
<option value="">-Select Your Rank-</option>
<option value="basic-ore-1">Basic Ore Miner - Level 1</option>
<option value="basic-ore-2">Basic Ore Miner - Level 2</option>
</select>
</div>
<div class="senior-airman">
<select class="second-level-select">
<option value="">-Select Your Rank-</option>
<option value="omber-miner-1">Omber Miner - Level 1</option>
<option value="omber-miner-2">Omber Miner - Level 2</option>
</select>
</div>
</div>
<div class="second-level-container">
<div class="basic-ore-1">
Line of text for basic ore miner 1
</div>
<div class="basic-ore-2">
Line of text for basic ore miner 2
</div>
<div class="omber-miner-1">
Line of text for omber miner 1
</div>
<div class="omber-miner-2">
Line of text for omber miner 2
</div>
</div>
Followed By:
$(document).ready(function() {
$('#Rank').bind('change', function() {
var elements = $('div.container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
How do I auto select the first option of both dropdown and display the final value OnLoad?
I'm looking at 3 by 3 drop down, with 9 values in total.

Check if this might help you out
$(document).ready(function() {
//bind onchange for the rank dd
$("#Rank").on('change', function() {
let selectedValue = $(this).val();
$(".container>div").hide();
if (selectedValue.length) {
$("." + selectedValue).show();
//select.val($(select + " option:eq(1)").val());
}
})
//bind onchange for the airman dd
$("#second-level-select-airman").on('change', function() {
let selectedValue = $(this).val();
$(".second-level-container").children().hide();
if (selectedValue.length) {
$("." + selectedValue).show();
//select.val($(select + " option:eq(1)").val());
}
})
//bind onchange for the senior airman
$("#second-level-select-senior-airman").on('change', function() {
let selectedValue = $(this).val();
$(".second-level-container").children().hide();
if (selectedValue.length) {
$("." + selectedValue).show();
//select.val($(select + " option:eq(1)").val());
}
});
//select first value of first dropdown
$("#Rank").val($("#Rank option:eq(1)").val()).trigger('change');
//select the first option from the 2nd menu depending on the valur of the first dd
$("." + $("#Rank").val()).find("select").val(
$("." + $("#Rank").val()).find("select option:eq(1)").val()
).trigger('change');
// $("#Rank").val($("#Rank option:eq(1)").val());
// $("." + $("#Rank").val()).find("select").val(
// $("." + $("#Rank").val()).find("select option:eq(1)").val()
// );
});
.airman,
.senior-airman,
.second-level-container>div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Rank" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="airman">Airman</option>
<option value="senior-airman">Senior Airman</option>
</select>
<div class="container">
<div class="airman">
<select class="second-level-select" id="second-level-select-airman">
<option value="">-Select Your Rank-</option>
<option value="basic-ore-1">Basic Ore Miner - Level 1</option>
<option value="basic-ore-2">Basic Ore Miner - Level 2</option>
</select>
</div>
<div class="senior-airman">
<select class="second-level-select" id="second-level-select-senior-airman">
<option value="">-Select Your Rank-</option>
<option value="omber-miner-1">Omber Miner - Level 1</option>
<option value="omber-miner-2">Omber Miner - Level 2</option>
</select>
</div>
</div>
<div class="second-level-container">
<div class="basic-ore-1">
Line of text for basic ore miner 1
</div>
<div class="basic-ore-2">
Line of text for basic ore miner 2
</div>
<div class="omber-miner-1">
Line of text for omber miner 1
</div>
<div class="omber-miner-2">
Line of text for omber miner 2
</div>
</div>

Related

I need to keep the default option in #city with this code

Looking for a cascading dropdown i found this piece of code here, which is working almost perfect for me, but i need to keep the default option in the second select-menu after changing the value in the first one.
https://stackoverflow.com/a/28902561/10391817
function filterCity() {
var province = $("#province").find('option:selected').text(); // stores province
$("#option-container").children().appendTo("#city"); // moves <option> contained in #option-container back to their <select>
var toMove = $("#city").children("[data-province!='" + province + "']"); // selects city elements to move out
toMove.appendTo("#option-container"); // moves city elements in #option-container
$("#city").removeAttr("disabled"); // enables select
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select" id="province" onchange="filterCity();">
<option value="1">RM</option>
<option value="2">FI</option>
</select>
<select class="select" id="city" disabled>
<option>SELECT CITY</option>
<option data-province="RM" value="1">ROMA</option>
<option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
<option data-province="FI" value="3">FIRENZE</option>
<option data-province="FI" value="4">PONTASSIEVE</option>
</select>
<span id="option-container" style="visibility: hidden; position:absolute;"></span>
You can try this code.
<select class="select" id="province">
<option value="1">RM</option>
<option value="2">FI</option>
</select>
<select class="select" id="city" disabled>
<option data-province="DEF">SELECT CITY</option>
<option data-province="RM" value="1">ROMA</option>
<option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
<option data-province="FI" value="3">FIRENZE</option>
<option data-province="FI" value="4">PONTASSIEVE</option>
</select>
<span id="option-container" style="visibility: hidden; position:absolute;"></span>
<script>
$('#province').on('change', function() {
var province = $("#province").find('option:selected').text();
$("#city option[data-province!='" + province + "']").hide();
$("#city option[data-province='" + province + "']").show();
$("#city option[data-province='DEF'").show().prop('selected', true);
$("#city").removeAttr("disabled");
});
</script>
https://jsfiddle.net/sg0t23bc/5/

Second dropdown value is not changing if I doesn't change my first dropdown

I am trying to show a table of reviews by taking the value of two dropdowns. When I was having one dropdown(positive, negative etc) that works fine but when I introduce another dropdown(food, drinks etc) it is not working.
It only works when I change the first dropdown and second dropdown but if I kept the first dropdown unchanged then it's not working
I tried by adding onchange method to the second dropdown. I just started with Javascript so not much idea about what to try.
function printResult(form) {
var output = {
{
output | safe
}
};
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.options[sel.selectedIndex].value;
var selectedVal2 = sel2.options[sel.selectedIndex].value;
//document.getElementById("showResult").innerText = "Your number is: " + selectedVal;
//console.log(output);
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult()">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
You need to pass the form on the change too and return false to not submit the form:
function printResult(form) {
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
return false;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult(this.form)">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
Perhaps you wanted this instead
window.addEventListener("load", function() {
document.getElementById("form1").addEventListener("submit", function(e) {
e.preventDefault(); // stop submission
var sel = this.list;
var sel2 = this.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = (selectedVal && selectedVal2) ? selectedVal + ":" + selectedVal2 : "Please select both";
});
});
<form action="dropdown" id="form1">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2">
<option value="">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>

Menu that filters elements by range between two input values

I want to create a filtering dropdown menu, basically like the one found on this site
What I got to work are filters that select items from a category
What I want to add are the two fields with years, which let you select a range of years (e.g from 1988 up to 2014) which will filter for all items that match the years within that range. It needs to be compatible with other filters for type, category etc. like described above. Can anyone tell me how this is done?
$(".filterOptions").click(function() {
var ChosenType = $('#typeOption').find(':selected').attr('value');
var ChosenSize = $('#sizeOption').find(':selected').attr('value');
$('.thumbnail').css('display', 'none');
var selector = '.thumbnail';
if (ChosenType != "all") {
selector += '[data-type-option="' + ChosenType + '"]';
}
if (ChosenSize != "all") {
selector += '[data-size-option="' + ChosenSize + '"]';
}
$(selector).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="typeOption" class="filterOptions">
<option value="all">All</option>
<option value="type1">type1</option>
<option value="type2">type2</option>
<option value="type3">type3</option>
</select>
<select id="sizeOption" class="filterOptions">
<option value="all">All</option>
<option value="small">small</option>
<option value="medium">medium</option>
<option value="large">large</option>
</select>
<select id="startyear" class="filterOptions">
<option value="all">from</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</select>
<select id="endyear" class="filterOptions">
<option value="all">to</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</select>
<div class="thumbnail" data-type-option="type2" data-size-option="small" data-year-option="2015">content1</div>
<div class="thumbnail" data-type-option="type1" data-size-option="large" data-year-option="2016">content2</div>
<div class="thumbnail" data-type-option="type2" data-size-option="large" data-year-option="2017">content3</div>
<div class="thumbnail" data-type-option="type3" data-size-option="small" data-year-option="2018">content4</div>
<div class="thumbnail" data-type-option="type1" data-size-option="medium" data-year-option="2017">content5</div>
<div class="thumbnail" data-type-option="type3" data-size-option="medium" data-year-option="2018">content6</div>
You could use on change event to listener for select elements and then inside filter method to filter by type and category values and hide div elements accordingly.
const divs = $('.thumbnail')
$("select").on('change', function() {
var type = $('#typeOption').val()
var cat = $('#categoryOption').val()
divs.show()
if (type != 'all') {
divs.filter(function() {
return type !== $(this).data('type-option')
}).hide()
}
if (cat != 'all') {
divs.filter(function() {
return cat !== $(this).data('category-option')
}).hide()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="typeOption">
<option value="all">all</option>
<option value="type1">1</option>
<option value="type2">2</option>
<option value="type3">3</option>
</select>
<select id="categoryOption">
<option value="all">all</option>
<option value="category1">1</option>
<option value="category2">2</option>
<option value="category3">3</option>
</select>
<div class="thumbnail" data-type-option="type2" data-category-option="category3">content 1</div>
<div class="thumbnail" data-type-option="type1" data-category-option="category3">content 2</div>
<div class="thumbnail" data-type-option="type1" data-category-option="category2">content 3</div>
You can loop over your selected elements and check that the year is valid
if (ChosenType != "all") {
selector += '[data-type-option="' + ChosenType + '"]';
}
if (ChosenCategory != "all") {
selector += '[data-year-option="' + ChosenYear + '"]';
}
let startYr = ...; // make sure this is a number (not a string)
let endYr = ...; // make sure this is a number (not a string)
let elems = $(selector);
elems.each(function() {
let yr = this.data-year-open; //select the year from your element. Make sure this is also a number
if (yr >= startYr && yr <= endYr) $(this).show();
});

jquery dropdown onchange not working in Safari

Working on a multi dropdown, where the first dropdown shows a second dropdown depending on the selection and second dropdown selection returns a relevant message. So far working fine in Chrome / FF but no luck in Safari/iOS.
$(function(){
$('#groups').on('change', function(){
var val = $(this).val();
var sub = $('#sub_groups');
$('option', sub).filter(function(){
if (
$(this).attr('data-group') === val
|| $(this).attr('data-group') === 'SHOW'
) {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap( "<span>" ).parent().hide();
}
}
});
});
$('#groups').trigger('change');
});
$(function() {
$('#sub_groups').change(function(){
$('.messages').hide();
$('#' + $(this).val()).show();
});
});
HTML:
<style>
.messages {color: #000; display: none;}
</style>
<select id="groups">
<option value='0'>Select 1</option>
<option value='zone1'>main group 1</option>
<option value='zone2'>main group 2</option>
<option value='zone3'>main group 3</option>
</select>
<select id="sub_groups">
<option data-group='SHOW' value='0'>Select 2</option>
<option data-group='zone1' value='message1'>option 1 </option>
<option data-group='zone1' value='message1'>option 2 </option>
<option data-group='zone2' value='message2'>option 3 </option>
<option data-group='zone2' value='message2'>option 4 </option>
<option data-group='zone3' value='message3'>option 5 </option>
<option data-group='zone3' value='message4'>option 6 </option>
</select>
<div class="output">
<div id="message1" class="messages">message 1</div>
<div id="message2" class="messages">message 2</div>
<div id="message3" class="messages">message 3</div>
<div id="message4" class="messages">message 4</div>
</div>
Any suggestions would be much appreciated, thanks.

Add data into a Select

I have this select; to select countries and add to a new select multiple with a limit of 5 countries, but I just want to add 1 country by select or more countries if i do a multiple select.
My mistake is in my function addC(), when I want to add more than 1 country in my select, it add the several countries in 1 option tag like this:
<option>South KoreaUSAJapan</option>
What I can modify to display the following way if i do a multiple select?:
<option>South Korea</option>
<option>USA</option>
<option>Japan</option>
My code:http://jsbin.com/osesem/4/edit
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected").text());
$("#addCountry").append("<option>" + newC + "</option>");
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label for="provincia2"><b>¿Country?</b></label><br>
<span>
<select multiple="multiple" size="5" id="countries">
<option value="1">South Korea</option>
<option value="2">USA</option>
<option value="2">Japan</option>
<option value="3">Italy</option>
<option value="4">Spain</option>
<option value="5">Mexico</option>
<option value="6">England</option>
<option value="7">Phillipins</option>
<option value="8">Portugal</option>
<option value="9">France</option>
<option value="10">Germany</option>
<option value="11">Hong Kong</option>
<option value="12">New Zeland</option>
<option value="13">Ireland</option>
<option value="14">Panama</option>
<option value="15">Norwey</option>
<option value="16">Sweeden</option>
<option value="17">India</option>
<option value="18">Morroco</option>
<option value="19">Russia</option>
<option value="20">China</option>
</select>
</span>
<div class="addremover">
<input class="add" type="button" onclick="addC()" value="Addd »" />
<br/>
</div>
<span>
<select id="addCountry" multiple="multiple" size="5">
</select>
</span>
use each function to loop through the text and append it..
try this
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected"));
newC.each(function(){
$("#addCountry").append("<option>" + $(this).text() + "</option>");
})
}
}
JSbin here
Or just clone the selected <option>'s
function addC() {
if ($('#countries option:selected').size() < 5)
{
$('#addCountry').append($('#countries option:selected').clone());
}
else
{
alert('you can only select 5');
}
}

Categories