Display selected divs with dropdown box but show all divs when no option is chosen

I came across a helpful code on this website while working on my own website. After customizing it to my liking, I encountered some issues. My main goal is to have all divs displayed when no value is selected from the dropdown box. Below is the code that I am currently using:

<style type="text/css">
websitesubmission {
display: block;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>

<script>
$('#category_faq').on('change', function () {
$('websitesubmission').hide();
$('websitesubmission.' + $(this).val()).show()
});
</script>

<select id="category_faq">
<option selected value="">Select An Option</option>
<option value="information">info</option>
<option value="news">news</option>
<option value="blog">blog</option>
</select>
<br/>
<websitesubmission class="information">info</websitesubmission> 
<websitesubmission class="news">news</websitesubmission>
<websitesubmission class="blog">blog</websitesubmission>

Check out the JSFiddle link for the functioning code: http://jsfiddle.net/fj07nnu3/105/

(UPDATED TO SHOW WORKING SOLUTION)

For a solution that worked well for another user, visit this link: http://jsfiddle.net/fj07nnu3/124/

javascriptjqueryhtmlcss

Answer №1

To make changes to your JQuery function, consider updating it as follows:

$('#category_faq').on('change', function() {
  if ($(this).val() == "") {
    $('websitesubmission').show();
  } else {
    $('websitesubmission').hide();
    $('websitesubmission.' + $(this).val()).show()
  }
});

The concept is straightforward: the first select option has an empty value "", and you need to constantly monitor any changes in the selected option to determine if its value remains as "".

Answer №2

To ensure correctness, it is best to verify if the chosen index is the first one (0), as in this case, the specific value of the option is irrelevant.

Starting from JQuery 1.6, you can utilize its prop method like so: $(this).prop('selectedIndex')

Example code:

$('#category_faq').on('change', function () {
  if ($(this)[0].selectedIndex == 0) {
    $('websitesubmission').show();
  } else {
    $('websitesubmission').hide();
    $('websitesubmission.' + $(this).val()).show()
  }
});
websitesubmission {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="category_faq">
    <option selected value="">Select An Option</option>
    <option value="information">info</option>
    <option value="news">news</option>
    <option value="blog">blog</option>
</select>
<br/>
<websitesubmission class="information">info</websitesubmission> 
<websitesubmission class="news">news</websitesubmission>
<websitesubmission class="blog">blog</websitesubmission>

Answer №3

Utilize specific text to achieve the following:

$('#category_faq').on('change', function () {
    if($(this).val() === "") {
        $('websitesubmission').show();
    } else {
        $('websitesubmission').hide();
        $('websitesubmission.' + $(this).val()).show()
    }
});

Answer №4

Here is a sample code snippet that you can use:

$('#category_faq').on('change', function () {
    $('websitesubmission').hide();
    if($(this).val() != ""){
    $('websitesubmission.' + $(this).val()).show()
    }else{
    $('websitesubmission').show()
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use jQuery to place tags around the content of existing <li> elements

Using jquery, I have been able to successfully create a list by using the following code: $(list).append(item); (where list is the list reference and item consists of the $('<li>') elements being added). var item = $('<li>' ...

javascriptjqueryhtmlcss

Ensuring that links are functional across all directory levels: a comprehensive guide

Looking at the image included here, you can see a preview of the website I'm currently building. The plan is to have individual pages for each machine in the company's lineup. Since the navigation bar and menu will be consistent across the entire ...

phphtmlcsstwitter-bootstraphref

Exploring cross-browser compatibility with the use of CSS3 and JavaScript

Starting a new project to create a fresh website. It seems like many people are leaning towards CSS3 and AJAX, neglecting browsers without JavaScript support. They resort to workarounds like enabling CSS3 through JavaScript in older browsers. Is this the ...

javascriptcssbrowsercompatibility

Switch between playing and pausing the mp3 audio in the Next application by using the toggle

I am currently working on my website and I have been trying to add a button to the bottom of the page that can play or pause a song using useSound library. The song starts playing when I click it for the first time, however, I am facing difficulty in stopp ...

javascriptreactjsnext.jsusesound

Altering the content of a span within a list item using AngularJS

Recently, I encountered some HTML code that looks like this... <ul id="sidemenu" class="wraplist wrapper-menu"> <li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)"> <span class="arrow material-icons" ...

javascriptangularjshtml-lists

Is it impossible to style an element within a div tag?

How can I apply styling to a specific div with id="1", which contains class="match"? Here is the code: <div class="col-lg-3"> <div id="1"> <p class="match">Match {this.state.matches[0].id}</p> <div class="tea ...

htmlcsstwitter-bootstrap

Problems encountered when attempting to create a link between two nodes on a force-directed graph using a mouse click

I'm currently working on creating an interactive graph where users can click on two nodes to establish a link between them (which can be removed later). My approach was inspired by Mike Bostock's example at: https://bl.ocks.org/mbostock/1095795 ...

javascriptd3.js

Sharing VueJS router with child component

How do I pass the router to my child component? This is my current router setup: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) export default function () { const Router = new VueRouter({ mode: ' ...

javascriptvue.js

"Encountering an unexpected validation error while using the LoginForm in Django

The Login and Register Model form I created is experiencing some issues. The Register form works well, but when I try to submit the Login form, it displays a validation error: "User with this Email already exists" This error message was not defined by ...

htmldjangodjango-formsdjango-templates

Angular: How to Disable Checkbox

Within my table, there is a column that consists solely of checkboxes as values. Using a for loop, I have populated all values into the table. What I have accomplished so far is that when a checkbox is enabled, a message saying "hey" appears. However, if m ...

javascripthtmlangulartypescriptcheckbox

Submit a collection of images and an object to the server using ReactJS

I'm currently working with Reactjs on the frontend. In order to set the profile picture to state, I've implemented the following code: handleImageChange = (event) => { event.preventDefault(); var file = event.target.files[ ...

javascriptreactjsaxiosfetch

Delete items from a batch file upload

Is it possible to select multiple files using the 'multiple' property on the file input tag, but deleting a single element seems more tricky. While you can't directly manipulate the file input due to security reasons, there is a jquery uploa ...

javascriptjqueryhtmljquery-ui

Increase the line spacing within paragraphs by eliminating the extra space at the top and bottom

Trying to adjust line height in a paragraph using CSS. Here is the HTML: <div> <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu au ...

htmlcss

I'm having trouble getting the gutter padding to show up in one specific content block on my Bootstrap webpage. How can I troubleshoot and resolve this

Currently, I am delving into the realm of Bootstrap 5 and have recently put together a simplistic webpage using the row/column structure suggested by Bootstrap. However, while my other columns seem to be cooperating and displaying the gutter padding as exp ...

htmlcssbootstrap-4

Can jQuery be used to modify the value of a JSON property within a file?

I am looking to create a counter that will have the same value for all users. In my json file, I have data which includes: count = 0. I want to create a function that runs every second and performs the following steps: 1. Retrieve the value from the jso ...

jqueryjson

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Here is an example of some HTML code: .container { height: 100%; width: 100%; display: flex; flex-direction: column; padding: 10px; background-color: aqua; } .box { width: 100%; height: 100%; flex-grow: 1; background-color: cadetb ...

htmlcssangularflexbox

The building of the module was unsuccessful due to a failure in the babel-loader located in the webpack module of Nuxt

While working on my Nuxt.js project, I encountered a warning error that I couldn't resolve even after searching for a solution. If anyone can assist me with this issue, it would be greatly appreciated. The error message is as follows: ERROR in ./.nu ...

javascriptvue.jswebpackbabeljsnuxt.js

Unfortunately, the input type number does not allow for the removal of decimal points

I need assistance with modifying the HTML code below. I want to remove the decimal point from the input field. Could anyone please provide instructions on how to accomplish this? <input type="number" min="0" step="1" ng-pattern="/^(0|[1-9][0-9]*)$/" ...

javascriptangularjshtml

Is there a way to identify and count duplicate data-items within an array, and then showcase this information using a react view?

If we have an array like this: [{id: 1, name: "chocolate bar"}, {id:2, name: "Gummy worms"}, {id:3, name:"chocolate bar"}] Is there a way to show on the dom that we have "2 chocolate bars and 1 Gummy Worms"? ...

javascriptarraysreactjsdata-structuresreduce

Displaying the server's response within an AJAX callback (implemented with jQuery)

I am in control of the server endpoint @app.route('/predict', methods=['GET', 'POST', 'OPTIONS']) @crossdomain(origin='*') def predict(): return 'predict12' I am aiming to have the response p ...

javascriptjqueryajax