Displaying different content inside a div based on the selection made in a dropdown menu

Question

Displaying different content inside a div based on the selection made in a dropdown menu

I'm experiencing difficulties with a jQuery script that should display the content of a div based on selected options in a drop-down menu.

The drop-down menu is supposed to provide numerical values for a calculator to determine a loan amount. However, when I input numerical values for both option value and corresponding div id, the code fails to work. Surprisingly, if I change these values to words, it works perfectly fine.

Is there a workaround to make this function using numerical values?

 <select name="apr" id="apr" class="loan-calculator__input" >                   
            <option value="">Select</option>
              <option value="4.7" class="good">Good</option>
              <option value="14.9" class="fair">Fair</option>
              <option value="29.9" class="poor">Poor</option>
            </select>
          </div>
          <div id="4.7"  style="display:none;" class="rating" ><p>Good - </p>
</div>
<div id="14.9" style="display:none;"class="rating" ><p>Fair</p>
</div>
<div id="29.9"   style="display:none;" class="rating"><p>Poor  </p>
</div>

(function($) {
$(document).ready(function() { 
    $('#apr').change(function(){
        $('.rating').hide();
        $('#' + $(this).val()).show();
    });
    });
})(jQuery);

A jsfiddle has been set up to demonstrate the issue - http://jsfiddle.net/nineseven/W37np/

javascript jquery html css

Answer 1

Answer №1

It's recommended to utilize the data attribute instead of using a number as an object identifier.

<div data-value="4.7"/>

$("[data-value='"+$(this).val()+"']").display()

Answer 2

It's recommended to utilize the data attribute instead of using a number as an object identifier.

<div data-value="4.7"/>

$("[data-value='"+$(this).val()+"']").display()

Answer 3

Answer №2

Using decimal IDs may cause issues with this functionality.
I would advise against using this method to display content.
Nevertheless, here is a working example using string IDs:

http://jsfiddle.net/W37np/11/

(function($) {
$(document).ready(function() { 
        $('#apr').change(function(){
            $('.rating').hide();
            $('#' + $( "#apr option:selected" ).attr("value")).show();
        });
        });
    })(jQuery);

Answer 4

Using decimal IDs may cause issues with this functionality.
I would advise against using this method to display content.
Nevertheless, here is a working example using string IDs:

http://jsfiddle.net/W37np/11/

(function($) {
$(document).ready(function() { 
        $('#apr').change(function(){
            $('.rating').hide();
            $('#' + $( "#apr option:selected" ).attr("value")).show();
        });
        });
    })(jQuery);

Answer 5

Answer №3

The functionality is not operational due to being interpreted as an expression.. avoid incorporating numerical values

Issue: Syntax error, unidentified expression: #14.9'

inspect the browser's error console for further information

Answer 6

The functionality is not operational due to being interpreted as an expression.. avoid incorporating numerical values

Issue: Syntax error, unidentified expression: #14.9'

inspect the browser's error console for further information

Answer 7

Answer №4

It's important to extract the value from the option that is selected. Also, consider changing your ids as they may not be appropriate. In my demonstration, I have replaced them with dashes for clarity.

$('#' + $(this).find('option:selected').val()).show();

Check out the demo here

Answer 8

It's important to extract the value from the option that is selected. Also, consider changing your ids as they may not be appropriate. In my demonstration, I have replaced them with dashes for clarity.

$('#' + $(this).find('option:selected').val()).show();

Check out the demo here

Answer 9

Answer №5

To assign specific values to certain options and modify the div's id accordingly, you can link the id with the option's class attribute. This way, you can extract the class and display it using the following code:

$('#' + $( "#selectedOption").attr('class')).show();

demo link

Answer 10

To assign specific values to certain options and modify the div's id accordingly, you can link the id with the option's class attribute. This way, you can extract the class and display it using the following code:

$('#' + $( "#selectedOption").attr('class')).show();

demo link

Answer 11

Answer №6

    $(document).ready(function () {
                    $('#apr').change(function () {
                        $('.rating').hide();
                        var prefix = "section-";
                        $('#' + prefix + $("#apr option:selected").attr("value")).show();
                    });
                });


<select name="apr" id="apr" class="loan-calculator__input" >                
                <option value="-1">Select</option>
                  <option value="321" class="excellent">Excellent</option>
                  <option value="654" class="average">Average</option>
                  <option value="987" class="poor">>Poor</option>
                </select>
              <div id="section-321" style="display:none;" class="rating" ><p>Excellent - You have a strong credit history and stable financial situation with no missed payments.</p>
</div>
<div id="section-654" style="display:none;" class="rating" ><p>Average - You may carry some debt and have had occasional late payments.</p>
</div>
<div id="section-987" style="display:none;" class="rating" ><p>Poor - You may have frequent missed payments, CCJs, and unstable job history.</p>
</div>

Using a prefix on the div tag is necessary to avoid using numeric values in IDs.

Answer 12

    $(document).ready(function () {
                    $('#apr').change(function () {
                        $('.rating').hide();
                        var prefix = "section-";
                        $('#' + prefix + $("#apr option:selected").attr("value")).show();
                    });
                });


<select name="apr" id="apr" class="loan-calculator__input" >                
                <option value="-1">Select</option>
                  <option value="321" class="excellent">Excellent</option>
                  <option value="654" class="average">Average</option>
                  <option value="987" class="poor">>Poor</option>
                </select>
              <div id="section-321" style="display:none;" class="rating" ><p>Excellent - You have a strong credit history and stable financial situation with no missed payments.</p>
</div>
<div id="section-654" style="display:none;" class="rating" ><p>Average - You may carry some debt and have had occasional late payments.</p>
</div>
<div id="section-987" style="display:none;" class="rating" ><p>Poor - You may have frequent missed payments, CCJs, and unstable job history.</p>
</div>

Using a prefix on the div tag is necessary to avoid using numeric values in IDs.

Displaying different content inside a div based on the selection made in a dropdown menu

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

leveraging express.js middleware alongside jwt and express-jwt for secured authentication in express framework

Disabling the submit button after submitting the form results in the page failing to load

Positioning an image at the bottom left of the page using absolute positioning is simply not effective

Adding HTML and scripts to a page using PHP and JS

Stop users from inputting dates beyond the current date in Angular 4

Are there any available proxy server or Apache modules for converting XML SOAP responses to JSON format upon installation?

Is it possible to retrieve data from a database using jQuery and store it in separate variables?

Is there a way to extract the content from a dynamic textbox using a dynamic button in HTML and AJAX?

Displaying a project in the same location using jQuery

What is the best way to conceal a div within every occurrence of a component when I activate my current target?

How can one quickly display a confirmation dialog box within react-admin?

Error encountered in jquery.d.ts file: Unresolved syntax issue

rotate a game embedded in a website by 90 degrees

Maintaining the selected option on page refresh with React Remix

Protractor's count() function fails to execute properly when called outside of a promise loop

Is there an advantage to pre-rendering a circle on an HTML5 canvas for improved performance?

Populate DataGrid using an input through AJAX and jQuery technology

Utilizing Jade to access and iterate through arrays nested in JSON data

Query will be filtered based on user input, if available

Using jQuery to apply a CSS border to an image within a textarea