How do I use onchange to make a changes to which list is shown (show/hide) by using jquery?

user_13763519 0
Viewed 65

This is my dropdown.

<select id="sortBySelector" onchange="chooseSort(value)" style="display:block;border-color: #e0e0e0;">
                    <option value="nameSort" selected>Alphabetical</option>
                    <option value="gradSort">Graduation Date</option>


                </select>

I have two <ul> with id= "nameSort" and "gradSort" I wrote jquery code that will show only the selected one. I tried this 

<script>
function chooseSort(value) {
    $("#nameSort").hide();
    $("#gradSort").hide();
    $(value).show();


}`

but it shows both lists when its on the Alphabetical option and shows nothing when i click on the Graduation option. Im not sure why this is happening. Please let me know if you can help. thank you for your time

asp.net-mvc css html jquery javascript
3 Answers

Consider what this is doing with the given value:

$(value).show();

If the value is gradSort then you're doing:

$("gradSort").show();

Which is an incorrect selector. If you're looking by id then it's missing the # at the beginning. You can add that to the values:

<option value="#nameSort" selected>Alphabetical</option>
<option value="#gradSort">Graduation Date</option>

Or, if for a reason outside of this you don't want to change the values, you can add it to the string in the selector:

$('#' + value).show();

or:

$(`#${value}`).show();

it shows both lists when its on the Alphabetical option

It sounds like it shows both lists when the page first loads. If that's the case you can just call the function manually on page load to set the initial state:

chooseSort('#nameSort');

or:

chooseSort('nameSort');

(depending on which solution you used above)

user_3281930

You need a conditional to determine which will be shown and which will stay hidden. There are a few different ways to do this but I would do it like so:

<select id="sortBySelector" onchange="chooseSort(value)" style="display:block;border-color: #e0e0e0;">
                    <option id="nameSort' value="nameSort" selected>Alphabetical</option>
                    <option id="gradSort value="gradSort">Graduation Date</option>


                </select>

function chooseSort(value) {
  if (value === 'nameSort'){
        $('#' + value).show(); // $("#nameSort").show(); would work
        $("#gradSort").hide();
    } else{
        $('#' + value).show(); // $("#gradSort").show(); would work
        $("#nameSort").hide();
    }
}

Let me know if this works!

EDIT: In the spirit of keeping your HTML the same, I did have to add the id to each option to make it work. Also, I had to redo the value.show()

user_107198680

The value itself will represent the actual value of option. So if the selected option value be gradSort this part of your code 

$(value).show();

will be pointed to 

$("gradSort").show();

which is not refer to anything in DOM. Because it is not a valid selector (tag), so to make this work, you should add # either

before your query selector

$('#' + value).show();

or before the value of your options.

<option value="#nameSort" selected>Alphabetical</option>
<option value="#gradSort">Graduation Date</option>

I will go with the query selector choice, so it will be something like this:

function chooseSort(value) {
  $("#nameSort").hide();
  $("#gradSort").hide();
  $("#" + value).show();
}

$(document).ready(function() {
  chooseSort("nameSort");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sortBySelector" onchange="chooseSort(value)" style="display:block;border-color: #e0e0e0;">
  <option value="nameSort" selected>Alphabetical</option>
  <option value="gradSort">Graduation Date</option>
</select>

<div id="nameSort">nameSort</div>
<div id="gradSort">gradSort</div>

user_119085020
Related