jQuery: handling event from changed select

Question

I'm taking my first steps in JQuery as I have an event I need to deal with on the website I'm trying to put together. All of this is just for training purposes.

I've taken a (free) bootstrap theme for an e-commerce website and am trying to apply some JQuery events to it to learn how it all hangs together. Some things are working well and others not at all. My goal here is to handle the event of a dropdown list (select) and reload a div element based on the result. So far I have not been able to either act ON the list or process events FROM it.

The select is contained in the div below. There is a label called "sortby" and the select, called "sortorder".

                <div class="shop-top">
                    <div class="shop-shorter">
                        <div class="single-shorter">
                            <label id = "sortby">Sort By :</label>
                            <select name="sortorder" id="sortorder">
                                <option selected="selected">Name</option>
                                <option>Barcode</option>
                                <option>Price</option>
                            </select>
                        </div>
                    </div>

                </div>

These are the three sample scripts I'm trying to get working to understand JQuery a bit. I've put them all in the head section and included jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript" >
    $(document).ready(function(){
      $("#sortby").click(function(){
        $("#sortby").hide();
      });
    });
</script>

This one works fine. I click on the label and the label disappears.

<script type="text/javascript" >
    $(document).ready(function(){
      $("#sortby").click(function(){
        $("#sortorder").hide();
      });
    });
</script>

This one does not work. I click on the label and the select list does not disappear.

<script type="text/javascript" >
    $("#sortorder").change( function () {
    var option = $("#sortorder").val();
    if(option.toLowerCase() == "name"){
        alert("name");
    }
    });
</script>

This one does not work. I select the option 'name' from the select list and there is no alert message displayed.

On the page itself, if I inspect the dropdown list I get the following:

<div class="nice-select" tabindex="0"><span class="current">Name</span><ul class="list"><li data-value="Name" class="option selected">Name</li><li data-value="Barcode" class="option">Barcode</li><li data-value="Price" class="option">Price</li></ul></div>

This "nice-select" is from a .css file which was included in the bootstrap theme, it's not explicitly mentioned in the file where the above code is from. The above block is preceded by the actual code in the element inspection window

<select name="sortorder" id="sortorder" style="display: none;">
    <option selected="selected">Name</option>
    <option>Barcode</option>
    <option>Price</option>
</select>

So,two things - I don't understand the mechanism whereby the select element is duplicated by this class and it seems as though this duplicated code is what is actually usable on the site. And, how do I actually interact with the element in question?

Edit: I've decided to park this with an intermediate solution for now. I've just added a button which does (part of) the job of retrieving the value of the select list when clicked.

    $(document).ready(function() { 

        $("#apply").on("click", () => {
        var sortType = $('#sortorder').val();
        
        if (sortType == 'Name') {
            $("#product-grid").load
            alert("sort by name");
        } else {
            $("#product-grid").load
            alert("sort by price");
        }

        });
    });

For the sake of completion, here's the code that does not work

    $(document).ready(function() { 
        /*$("#sortorder").niceSelect();
        $("#sortorder").on("change", () =>{
            
            var selected = $("#myselect").val();
            if (sortType == 'Name') {
                $("#product-grid").load
                alert("sort by name");
            } else {
                $("#product-grid").load
                alert("sort by price");
            }
        })*/

There is a jQuery plugin being used to create an html dropdown from the ` — charlietfl, Dec 06 '20 at 13:44
@charlietfl this is almost certainly the case. There is a link to a JS file in the footer. It's misspelled (both the link and the file itself) so I didn't find it with a search. This answers the first question! — pickarooney, Dec 06 '20 at 13:49
@Swati that would affect all elements of this class. There are several nice-select elements on the page and I need to be able to refer to a specific one. I also need to be able to act on events specifically from this element. — pickarooney, Dec 06 '20 at 13:52
For multiple cases try `$(this).closest('.single-shorter').find('.nice-select').hide()` to hide the appropriate instance — charlietfl, Dec 06 '20 at 13:57
@charlietfl is this 'closest' in terms of where the item to be acted upon is on screen relative to the item clicked or in terms of where they are in the code? I'm not sure this will solve the issue as it is likely neither is the case on the page. Also, to act on an event in the select I need to specifically refer to it — pickarooney, Dec 06 '20 at 14:03
@charlietfl seems clear enough. Not useful though, unfortunately. I think I need to look at overriding the nice-select altogether or maybe just using radio buttons — pickarooney, Dec 06 '20 at 14:50
https://stackoverflow.com/questions/18490026/refresh-reload-the-content-in-div-using-jquery-ajax https://stackoverflow.com/questions/31375793/is-it-possible-to-refresh-a-div-on-a-radio-button-click http://jsfiddle.net/Narendrad/sk4bxmpr/2/ — react_or_angluar, Dec 06 '20 at 14:58
@quantumPuter I looked at your example and tried to apply it to a set of (two) radio buttons, each one calling the refresh on clicking. However, it's not possible to actually click and select the radio, just clicking on it at all causes the refresh and the button clicked doesn't stay checked — pickarooney, Dec 06 '20 at 16:33
@quantumputer yes. I've gone back and forth between this and the original idea after finding te fucntion $("#sortortder").niceSelect(); but I couldn't get that to work either. I've settled on a button for now as I've spent most of a day getting nowhere. The button is able to get the value of the select list and return the selected value. I'm going to move onto the next step, which is figuring out how to call my PHP sort function dependent on the result of the select. Thank you very much for your help. — pickarooney, Dec 06 '20 at 17:08

jQuery: handling event from changed select

0 Answers0