Image of code is currently not accessible on this device
Apologies for the lack of visual aid, I have coded on a different device. I am looking for a way to make the div appear based on certain options selected from both dropdown menus. Any assistance with this would be greatly appreciated.
If you want to display or hide a div based on the selected values of two select dropdowns, you can achieve this by comparing the selected values.
To retrieve the selected value of a select element, you can use the following code:
document.getElementById("getFname").value
Instead of passing parameters in onchange event, it is recommended to compare the selected values directly and apply styling accordingly.
You can view the code example at http://jsbin.com/nahiko/edit?html,console,output
When Two options are selected, a DIV is hidden and displayed accordingly.
<select id="selection">
<option value=""></option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
<select id="selection2">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<div name="toggle" id="One" style="display:none">
You can see me if you select option ONE
</div>
<div name="toggle" id="Two" style="display:none">
You can see me if you select option TWO
</div>
var _selectEle = document.getElementById('selection');
function toggleDivs(evt){
var old = document.querySelector('.show') || false;
if(old){
old.className = ''
}
if(!this.value){
return;
}
if(_selectEle2.value == "A" && _selectEle1.value == "One"){
document.getElementById("One").className = 'show';
}
else if(_selectEle2.value == "B" && _selectEle1.value == "Two"){
document.getElementById("Two").className = 'show';
}
}
_selectEle1.addEventListener('change', toggleDivs);
_selectEle2.addEventListener('change', toggleDivs);
I've been attempting to implement material-ui and iterate over it within an array (to create ratings for items, similar to e-commerce websites). Unfortunately, the code is not functioning as expected. When I run it on my localhost server, no stars are ...
An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...
I'm currently facing an issue with a string I received after sending a command line that included the <0x00> character. How can I remove it from the string? For instance, here is my variable string: <0x00> awplus # desired output: awplus ...
I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...
I need help with implementing setInterval in my react redux application. Below is the code snippet from FileAction.js export const SetPath = ({ path, location }) => async (dispatch) => { try { let interval; if (pre_path === path) ...
When it comes to handling and displaying large data, I find For Loops and ForEach Loops to be extremely useful. However, adding an eventListener to a loop can present some challenges. In the code snippet below, you'll see that I'm looping through ...
Essentially, here's the situation: Browser: Iphone (the issue doesn't occur in Android): My current setup includes: <meta name="viewport" content="user-scalable = yes"> Here is the corresponding CSS: html, body, #wrapper { height: 1 ...
Feeling thrown off by javascript Map()? My query revolves around javascript Map() - the set, get, and has() functions. Despite thinking I was an expert, it seems I still have things to learn... Situation: I'm dealing with a 'global' map sto ...
I am currently using Bootstrap and Angular to develop a single-screen webpage tailored for small screens such as the Adafruit 2.2" or 2.8" screen for the Raspberry Pi, or mobile phone displays. I aim to make all content (specifically about 3-4 rows of a ta ...
Seeking advice on developing a functional contact form using HTML, CSS, and JavaScript. All conditions currently validate properly, but encountering an issue with error messages persisting after re-entering the required fields. Additionally, looking to red ...
I am currently working on a parent component that iterates over an array and passes props to a child component. In the child component (shown below), I have checkboxes with Font Awesome icons for users to mark their selections. When a user checks a box, I ...
Struggling to generate a unique ID in Node.js and MongoDB, using a while loop that checks existing IDs in MongoDB until a unique value is found. If the ID is already taken, a number is added to the end until Mongo returns no results. Everything seems to b ...
My styling skills are limited, but I'm attempting to create a marker that resembles the image linked below: https://i.stack.imgur.com/wXkaq.png. So far, I've made some changes in the code snippet provided, but I'm struggling to get it to d ...
I have a dilemma with my two buttons - one is green and the other has no background. I want them to change appearance when clicked, from green to one with a dashed border-bottom style. Below is the HTML code for these buttons: <div class="btns"> ...
Ajax functionality $("#panchayat").change(function(){ var param = {'panchayat_id':$(this).val()}; alert (param['panchayat_id']); $.ajax({ type : 'POST', url : '<?php echo base_url();?>index.php/parent_taluk' ...
Recently, I have been attempting to modify the timer in a game using scripts found on various websites. My coding skills are not top-notch, so I am seeking some assistance. I am keeping my fingers crossed that the timer is not server-sided. Upon inspecting ...
Currently, I am working on an asp.net page which contains a mix of asp.net buttons and HTML input[type=button] elements. These HTML buttons are specifically used to initiate AJAX calls. My dilemma arises when the user hits ENTER - instead of defaulting to ...
I am currently working on developing a rather large app. Everything was running smoothly in the development environment without any errors. However, upon switching to the production environment, I started encountering numerous errors. Nuxt seems to be havi ...
I have two tilesheet images and I have successfully rendered them, but I am struggling to figure out how to place the character in front of the map. https://i.stack.imgur.com/n1a3Q.png I have placed these images in two different JavaScript files. This i ...
Currently, I am implementing Angular 2 Drag-and-Drop from this library to enable the selection of list items using a drag and drop method. However, I have encountered issues with its functionality on touch devices and when attempting to perform multiple it ...