I can't figure out why this script wont work:
<select name="options" id="options">
<option value="divname1"> Loan Protection Insurance</option>
<option value="divname2"> GAP or Cash Assist Insurance</option>
<option value="divname3"> Home Insurance</option>
<option value="divname4"> Landlords Insurance</option>
<option value="divname5"> Car Insurance</option>
</select>
<div id="divname1" style="display: block">Test 1</div>
<div id="divname2">Test 2</div>
<div id="divname3">Test 3</div>
<div id="divname4">Test 4</div>
<div id="divname5">Test 5</div>
document.getElementById('id-of-select').onchange = function() {
var i = 1;
var myDiv = document.getElementById("divname" + i);
while(myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById("divname" + ++i);
}
document.getElementById(this.value).style.display = 'block';
};
div {
display: none;
}
Here is the code
http://jsfiddle.net/2ukyA/7/
However i can get this code working
http://jsfiddle.net/2ukyA/
But i want to have more than one of these on a page so i need something that isn't based on just numbers.
Instead of hiding all divs manually, you could just hide the <div> related to the previously selected value. You could store an associative array (like a map) in which you had, for a given <select> id, the last selected value, or even <div> id. In the onchange event handler, just hide the <div> with the id in the map, and show the new one.
Notice you'll still need to have an association (implicit if they're the same, or explicit if you store it in an array) between the <option> and the <div> id.
See an example in this JSFiddle.
In this example, there is a multidimensional associative array (sort of a map of maps) that stores the <option>s for each <select>. Each <option> is also associated to the <div> id it shows when selected. This same array is used to store the previously selected value for the array (in the entry previousValue).
Notice the definition of the associative array is done statically in javacsript, but it could be dynamically retrieved off an external JSON file, or an AJAX request. The <select> elements could also be dynamically built, but you'd need a little bit more information (i.e. option descriptions).
Javascript:
var selectDivOptions=
{select1:
{
option11: 'div11',
option12: 'div12',
option13: 'div13'
},
select2: {
option21: 'div21',
option22: 'div22',
option23: 'div23'
}
};
for (var key in selectDivOptions){
var element = document.getElementById(key);
element.onchange = selectChange;
}
function selectChange(){
// Hide the div pointed by the previous value
var previousValue = selectDivOptions[this.id]['previousValue'];
if (previousValue){
document.getElementById(previousValue).style.display = 'none';
}
// Show the div
var divToShow = selectDivOptions[this.id][this.value];
if (divToShow){
document.getElementById(divToShow).style.display='block';
}
// Store the current value as the previous value
selectDivOptions[this.id]['previousValue'] = divToShow;
}
HTML
<select name="options" id="select1">
<option value="option11"> Option 11</option>
<option value="option12"> Option 12</option>
<option value="option13"> Option 13</option>
</select>
<div id="div11">Div 11</div>
<div id="div12">Div 12</div>
<div id="div13">Div 13</div>
<br />
<select name="options2" id="select2">
<option value="option21"> Option 21</option>
<option value="option22"> Option 22</option>
<option value="option23"> Option 23</option>
</select>
<div id="div21">Div 21</div>
<div id="div22">Div 22</div>
<div id="div23">Div 23</div>
Related
One Form on the page I am accessing. This form has a dropdown with 3 options. I need to select the third option. Accessing the webpage from a C# program with cefsharp library (embedded web browser).
I can change the displayed text using
document.forms[0].getElementsByClassName('css-0 Select__single-value')[0].innerText="Keep in-play";
but this has not been registered. Have also tried to trigger input and change events but it is still not recognising my selection.
Any suggestions?
Here is the original DOM for the form:
<div class="bet-widget-optional-params">
<div class="bet-params">
<div class="param-wrapper"><span class="param-label"><a class="link" href="https://help.smarkets.com/hc/en-gb/articles/115003946591" target="_blank">Time In Force</a></span>
<div class="param-select">
<div class="css-0 Select custom-select-box Select menu-on-click">
<div class="css-0 Select__control">
<div class="css-0 Select__value-container Select__value-container--has-value">
<div class="css-0 Select__single-value">Default</div><input id="react-select-bet-param-selector-input" readonly="" tabindex="0" class="css-14uuagi" value=""></div>
<div class="css-0 Select__indicators"><span class="css-0 Select__indicator-separator"></span><span aria-hidden="true" class="Select__arrow-zone"><span class="Select__arrow"></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In JavaScript you can set the selectedIndex property.
elem.selectedIndex = 2;
Setting -1 will remove any selection, and any positive integer will select that item in the list (0-indexed)... so if you want the 3rd item, just set it to 2.
HTMLSelectElement.selectedIndex docs
The property works as a getter too, so if you want to know which element is selected, you can request it like:
var currentSelectedIndex = elem.selectedIndex;
Full interactive example below:
var selectElem = document.getElementById('select');
var pElem = document.getElementById('p');
var buttonElem = document.getElementById('button');
selectElem.addEventListener('change', function() {
var index = selectElem.selectedIndex;
pElem.innerHTML = 'selectedIndex: ' + index;
});
buttonElem.addEventListener('click', function(){
selectElem.selectedIndex = 2;
});
<p id="p">selectedIndex: 0</p>
<select id="select">
<option selected>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
<option>Option E</option>
</select>
<input type="button" id="button" value="Set it to C (2)"/>
I have to make a dropdown menu in which selection of an option loads an image under it, and it also shows another dropdown menu under the image with options related to the selection.
Now this second dropdown menu, when I select an option, I need an image and some info to load in another column on the same page. I'm new to JS so a bit too ignorant.
<div class="row">
<select>
<option value="1">Please select an author:</option>
<option value="2">Gillian Flynn</option>
<option value="3">Robert Galbraith</option>
<option value="4">Khaled Hosseini</option>
</select>
</div>
document.getElementsByTagName('select')[0].onchange = function() {
var elements = document.getElementsByClassName("toggleContent");
for(var i = 0, length = elements.length; i < length; i++) {
elements[i].style.display = 'none';
}
var value = this.options[this.selectedIndex].value;
document.getElementById(value).style.display = "block";
}
.toggleContent{
display:none;
}
.defaultContent{
display:block;
}
<div class="row">
<select>
<option value="1">Please select an author:</option>
<option value="2">Gillian Flynn</option>
<option value="3">Robert Galbraith</option>
<option value="4">Khaled Hosseini</option>
</select>
</div>
<div id="1" class="toggleContent defaultContent">11111111111111111111</div>
<div id="2" class="toggleContent">22222222222222222222</div>
<div id="3" class="toggleContent">33333333333333333333</div>
<div id="4" class="toggleContent">44444444444444444444</div>
I have a working example of code I need, but some improvement is required.
$("#filtroSolicitacoes").on("submit", function(){
$("#solicitacoes div").show();
var filter = "";
$(this).find("[data-form]").each(function(){
if( $(this).val() != "" ) filter += ("[" + $(this).attr("data-form") + "='" + $(this).val() + "']");
});
if(filter.length > 0) $("#solicitacoes div").not(filter).hide();
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filtros">
<form id="filtroSolicitacoes" type="post" name="filtroSolicitacoes">
Protocolo: <input data-form="id" type="text" name="filtroProtocolo" id="filtroProtocolo" size="5"/>
Solicitante: <input data-form="title" type="text" name="filtroSolicitante" id="filtroSolicitante" size="10"/>
Status:
<select data-form="status" name="filtroStatus" id="filtroStatus">
<option value="">-- Selecione Status--</option>
<option value="3">Aguardando Aprovação</option>
<option value="18">Encaminhado</option>
<option value="2">Iniciado</option>
<option value="1">Não Iniciado</option>
<option value="4">Pendente de Esclarecimento</option>
<option value="16">Reiniciado</option>
<option value="6">Reprovado</option>
</select>
Analista:
<select data-form="analista" name="filtroAnalista" id="filtroAnalista">
<option value="">-- Selecione Analista--</option>
<option value="23">Robert</option>
<option value="46">Allan</option>
<option value="49">Edward</option>
<option value="32">Jake</option>
<option value="14">Stella</option>
</select>
<button type="submit" id="filtrar" style="float:right; margin-right:10px">:: Filtrar ::</button>
</form>
</div>
<div id="solicitacoes">
<div id='1' title='Mike' status='18' analista='23'>Whatever content 1</div>
<div id='2' title='John' status='16' analista='46'>Whatever content 2</div>
<div id='3' title='Tom' status='2' analista='49'>Whatever content 3</div>
<div id='4' title='Mike' status='4' analista='23'>Whatever content 4</div>
<div id='5' title='Kate' status='3' analista='32'>Whatever content 5</div>
<div id='6' title='Steve' status='1' analista='14'>Whatever content 6</div>
</div>
Filterable items have single property:
<div id='6' title='Steve' status='1' analista='14'>Whatever content 6</div>
here status='1' attribute can have only one value (1 in this case). I need to be able add multiple values in one attribute, like so:
<div id='6' title='Steve' status='1 2' analista='14 15'>Whatever content 6</div>
And items with corresponding values must be shown up after filtration.
Unfortunately my knowledge doesn't admit me made that improvement, your help is highly appreciated.
Thank you!
Your main problem lies in how you are constructing your filter:
if( $(this).val() != "" )
filter += ("[" + $(this).attr("data-form") + "='" + $(this).val() + "']");
This means that you can only select a attribute that exacty matches the value, so if you have space separated values in your attributes, e.g. analista='14 15', the filter [analista='14'] or [analista='15'] will never match. Of course, one may find the easy way out of using the *= comparator, but that is very unreliable because that means [analista*='14'] will match any elements that contain analista="14 15" and also analista="140000" for example.
The fix I am proposing is going to slightly rewrite your filtering logic, so do stick with me step-by-step:
Remember to use data- attributes for non-standard attributes, i.e. you can keep id and title, but use data-status and data-analista instead of status and analista respectively.
In your JS, we can cache the $("#solicitacoes").find("div") collection for performance.
Instead of creating a concatenated string of filter, we simply create an empty object. It will serve as a dictionary with contains the attribute stored as the key, and the input field values as the values.
When that dictionary is created, we use the for (var x in ...) syntax to iterate through all keys in your dictionary.
In each iteration, we will have access to the attribute that we want to filter and the value we are interested in. That is your entry of the dictionary.
With this in hand, you can iterate through the cached collection of $("#solicitacoes").find("div"). We want to access the value of the attribute of interest, and then split/explode the string by the space character, so data-analista="14 15" for example will be converted into an array of [14, 15].
Check if the array contains the value in the dictionary entry
See proof-of-concept below: I have added additional space-separated values to the first <div> to illustrate the example.
$("#filtroSolicitacoes").on("submit", function() {
// Cache collection
var $divsToFilter = $("#solicitacoes").find("div");
$divsToFilter.show();
var dictionary = {};
$(this).find("[data-form]").each(function() {
if (this.value)
dictionary[$(this).attr('data-form')] = this.value;
});
// Loop through the dictionary to access individual entries
for (var key in dictionary) {
// We have the key, use it to get the value
var value = dictionary[key];
// Filter the divs
$divsToFilter.filter(function() {
// Explode/split all space-separate values stored in attribute into an array
var dataValues = $(this).attr(key);
// Check if our dictioanry entry's value matches any in the array
// If it is missing, we want to keep it in the filter so that we can hide it
return dataValues.indexOf(value) === -1;
}).hide();
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filtros">
<form id="filtroSolicitacoes" type="post" name="filtroSolicitacoes">
Protocolo: <input data-form="id" type="text" name="filtroProtocolo" id="filtroProtocolo" size="5" /> Solicitante: <input data-form="title" type="text" name="filtroSolicitante" id="filtroSolicitante" size="10" /> Status:
<select data-form="data-status" name="filtroStatus" id="filtroStatus">
<option value="">-- Selecione Status--</option>
<option value="3">Aguardando Aprovação</option>
<option value="18">Encaminhado</option>
<option value="2">Iniciado</option>
<option value="1">Não Iniciado</option>
<option value="4">Pendente de Esclarecimento</option>
<option value="16">Reiniciado</option>
<option value="6">Reprovado</option>
</select>
Analista:
<select data-form="data-analista" name="filtroAnalista" id="filtroAnalista">
<option value="">-- Selecione Analista--</option>
<option value="23">Robert</option>
<option value="46">Allan</option>
<option value="49">Edward</option>
<option value="32">Jake</option>
<option value="14">Stella</option>
</select>
<button type="submit" id="filtrar" style="float:right; margin-right:10px">:: Filtrar ::</button>
</form>
</div>
<div id="solicitacoes">
<div id='1' title='Mike' data-status='18 16 2' data-analista='23 46 49'>Whatever content 1</div>
<div id='2' title='John' data-status='16' data-analista='46'>Whatever content 2</div>
<div id='3' title='Tom' data-status='2' data-analista='49'>Whatever content 3</div>
<div id='4' title='Mike' data-status='4' data-analista='23'>Whatever content 4</div>
<div id='5' title='Kate' data-status='3' data-analista='32'>Whatever content 5</div>
<div id='6' title='Steve' data-status='1' data-analista='14'>Whatever content 6</div>
</div>
Bonus if you're using ES6: everything can be made slightly simpler. This is when you realise you don't actually need jQuery all the time ;)
document.getElementById('filtroSolicitacoes').addEventListener('submit', e => {
e.preventDefault();
const divsToFilter = document.querySelectorAll('#solicitacoes div');
const userFilters = e.target.querySelectorAll('[data-form]');
Array.from(divsToFilter).forEach(element => element.style.display = 'block');
const dictionary = {};
Array.from(userFilters).forEach(input => {
if (input.value)
dictionary[input.dataset.form] = input.value;
});
for (let key in dictionary) {
const value = dictionary[key];
Array.from(divsToFilter).forEach(element => {
var dataValues = element.getAttribute(key);
if (!dataValues.includes(value))
element.style.display = 'none';
});
}
});
<div id="filtros">
<form id="filtroSolicitacoes" type="post" name="filtroSolicitacoes">
Protocolo: <input data-form="id" type="text" name="filtroProtocolo" id="filtroProtocolo" size="5" /> Solicitante: <input data-form="title" type="text" name="filtroSolicitante" id="filtroSolicitante" size="10" /> Status:
<select data-form="data-status" name="filtroStatus" id="filtroStatus">
<option value="">-- Selecione Status--</option>
<option value="3">Aguardando Aprovação</option>
<option value="18">Encaminhado</option>
<option value="2">Iniciado</option>
<option value="1">Não Iniciado</option>
<option value="4">Pendente de Esclarecimento</option>
<option value="16">Reiniciado</option>
<option value="6">Reprovado</option>
</select>
Analista:
<select data-form="data-analista" name="filtroAnalista" id="filtroAnalista">
<option value="">-- Selecione Analista--</option>
<option value="23">Robert</option>
<option value="46">Allan</option>
<option value="49">Edward</option>
<option value="32">Jake</option>
<option value="14">Stella</option>
</select>
<button type="submit" id="filtrar" style="float:right; margin-right:10px">:: Filtrar ::</button>
</form>
</div>
<div id="solicitacoes">
<div id='1' title='Mike' data-status='18 16 2' data-analista='23 46 49'>Whatever content 1</div>
<div id='2' title='John' data-status='16' data-analista='46'>Whatever content 2</div>
<div id='3' title='Tom' data-status='2' data-analista='49'>Whatever content 3</div>
<div id='4' title='Mike' data-status='4' data-analista='23'>Whatever content 4</div>
<div id='5' title='Kate' data-status='3' data-analista='32'>Whatever content 5</div>
<div id='6' title='Steve' data-status='1' data-analista='14'>Whatever content 6</div>
</div>
I am trying to create a webpage where the content changes depending on which drop down options the user has selected. Once the user has made his first choice, the content of a drop down menu can be an additional nested drop down menu with another choice the user must make.
I am now trying to figure out how I can pre-select options by passing parameters in the URL for both the first drop down and a number of nestet drop downs.
I have the basic functionality down. Here's my HTML:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js_select.js"></script>
<script type="text/javascript" src="js_drop.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<select id="select" class="div-toggle" data-target=".my-info-1">
<option id="one" value="noselection" data-show=".noselection">
Choose option
</option>
<option id="two" value="2015" data-show=".2015">
2015
</option>
<option id="three" value="2014" data-show=".2014">
2014
</option>
</select>
<div class="my-info-1">
<div class="noselection hide">
No choice made
</div>
<div class="2015 hide">
2015
</div>
<div class="2014 hide">
A nested drop down within the 2014 selection:<br><br>
<select id="select" class="div-toggle" data-target=".my-info-2">
<option id="one" value="noselection2" data-show=".noselection2">
Choose option
</option>
<option id="two" value="s1" data-show=".s1">
January
</option>
<option id="three" value="s2" data-show=".s2">
February
</option>
</select>
<div class="my-info-2">
<div class="noselection2 hide">
No choice made
</div>
<div class="s1 hide">
Information about January
</div>
<div class="s2 hide">
Information about February
</div>
</div>
</div>
</div>
Here's my css.css:
.hide {
display: none;
}
And here's js_drop.js that makes content appear depending on the user selection. I found the script here: Change the content of a div based on selection from dropdown menu:
$(document).on('change', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('change');
});
I am now adding functionality to make it possible to link to a specific drop down selection and any nested selections by adding parameters to the URL, like in:
http://example.com/page.html?select=three&selectnested=two
I am using js_select.js for this function. I found the code here: How to create a hyperlink that directs to a page with pre-selected option in a drop-down menu?
$(document).ready(function() {
var select = GetUrlParameter("select");
$("#" + select).attr("selected", "");
});
function GetUrlParameter(name) {
var value;
$.each(window.location.search.slice(1).split("&"), function (i, kvp) {
var values = kvp.split("=");
if (name === values[0]) {
value = values[1] ? values[1] : values[0];
return false;
}
});
return value;
}
My guess at a solution would be to:
Change id on my second <select> to id="selectnested"
Add the following code to my js_select.js above the function
The code:
$(document).ready(function() {
var select = GetUrlParameter("selectnested");
$("#" + select).attr("selected", "");
});
But this solution does not choose a selection with-in the nested drop down when the page loads using my example URL above.
Any hint on solving this would be much appreciated.
The issue is that you have multiple elements with the same ID (both <select>s have the ID "select", the <option>s have repeated IDs "one", "two" and "three").
Change the IDs of the <select> and <option> elements so they don't conflict with each other.
Example:
<select id="select" class="div-toggle" data-target=".my-info-1">
<option id="select-one" value="noselection" data-show=".noselection">
Choose option
</option>
<option id="select-two" value="2015" data-show=".2015">
2015
</option>
<option id="select-three" value="2014" data-show=".2014">
2014
</option>
</select>
...
<select id="nested" class="div-toggle" data-target=".my-info-2">
<option id="nested-one" value="noselection2" data-show=".noselection2">
Choose option
</option>
<option id="nested-two" value="s1" data-show=".s1">
January
</option>
<option id="nested-three" value="s2" data-show=".s2">
February
</option>
</select>
This way, in your initialization function, you can do:
$(document).ready(function() {
// First selection menu options
var select = GetUrlParameter("select");
$("#select-" + select).attr("selected", "");
// "Nested" selection menu options
var select = GetUrlParameter("selectnested");
$("#nested-" + select).attr("selected", "");
});
And due to those prefixes (select- and nested-) jQuery will only find one element with that ID, and you'll hopefully have no more trouble!
I need to be able to hide/show multiple div tags on the same page via a drop down menu, but I want them to use the jQuery 'fadeToggle'. I can easily do this without 'fadeToggle' by using the following code:
function generateTask() {
document.getElementById('football').style.display = 'none';
document.getElementById('football2').style.display = 'none';
}
html:
<select name="something" id="something">
<option value="1" onclick="generateTask();">Football</option>
<option value="2" onclick="generateTask();">Cricket</option>
<option value="3" onclick="generateTask();">Baseball</option>
</select>
<div id="football">balls</div>
<div id="football2">shorts</div>
But this solution isn't as elegant. Any help would be appreciated.
The main complication is that the div tags "football" and "football2" might both be required for Cricket but only "football2" required for say Baseball.
You can try this
function generateTask(){ $('#football, #football2').toggle();}
Or yan can add classes on every elements that should be affected by your dropdown:
For example:
<div id="football" class="football">balls</div>
<div id="football2" class="football cricket">shorts</div>
<div id="cricket" class="cricket">stick</div>
And than target every element that's in link with your dropdown action.
If you can keep the value of the options as the ids of the divs then it will be much simpler.
Something like this
Markup
<select name="something" id="something">
<option value="football">Football</option>
<option value="cricket">Cricket</option>
<option value="baseball">Baseball</option>
</select>
<div id="football" class="content">Football content</div>
<div id="cricket" class="content">Cricket content</div>
<div id="baseball" class="content">Baseball content</div>
JS
$("#something").change(function(){
var id = "#"+this.value;
//This will hide all the divs with class content but not the selected option
$(".content").filter(":not("+id+")").hide();
$(id).fadeToggle();//This will toggle div based on the selected option
});