Is there a onClick function which can be assigned to a button - resulting in an option being selected in dropdown menu elsewhere?

Question

I have a search and filter form (see top of page over the posts grid) here:

https://ba2018.wpengine.com/sf-test-side

The second field of the form named "Boligtype" is a dropdown allowing multiple choices.

I want to create a button elsewhere on the same page (outside of the search and filter form) - which on click activates the "Villa" option in the above-mentioned dropdown.

I am new to js so have tried some different options myself, but pretty sure they have been pretty long shots. All I know is I need an "onClick" event, from researching articles here and on Google. But I am still new to js, so don't know where to take it from here really:

<button onclick="myFunction()">Villas</button>

<script>
function myFunction() {

}
</script>

For the form? Yes. But it's a plugin, not code i've done myself. — emiliano85, Oct 11 '19 at 14:29
Please go through the below link. I hope that could help you. https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — Rohit kalyanpuri, Oct 11 '19 at 14:30

score 0 · Answer 1 · answered Oct 11 '19 at 14:28

0

You can find the element and trigger the click event (or whatever event you are listening to).

function myFunction() {
  const select = document.querySelector('#mySelect'); // Find element
  select.click(); // Click element
  // If you are not listening to click or need a different event
  const event = new Event('customEvent');
  select.dispatchEvent(event);
}

With your particular page it seems you are listening on the label

document.querySelector('.sf-field-post-meta-filter_boligtype > label').dispatchEvent(new Event('click'))

answered Oct 11 '19 at 14:28

ChrisG

2,637
18
20

Thanks a lot for reaching out ChrisG! A question though: I don't see "Villa" anywhere in that code, how will it know i want that option clicked? – emiliano85 Oct 11 '19 at 14:38
Oops, I missed that part. That gets trickier because it isn't clear what you are using for your multi-select. – ChrisG Oct 11 '19 at 14:42
@emilianoD85 The general idea would be to trigger the same event that happens when one of your options are clicked. From a quick look, it appears to be `search_results_mouseup`. So you want to fire that event (which may be wrapped inside your plugin). – ChrisG Oct 11 '19 at 14:47

Java_code · Answer 2 · 2019-10-11T14:43:31.343

Here is a simple example that shows how you can make first option in the drop down selected with button click:


<!Doctype html>
<html>

<head>
<script>
function buttonClick(){
document.getElementById("first").selected = true;
}
</script>

</head>

<body>

<select id="stateSelect" name="stateSelect">
    <option value="none" id="first">first option</option>
    <option value="AL">second option</option>
    <option value="AK">third option</option>
</select>

<button type="button" onclick="buttonClick();" id="button"> click me!</button>

</body>

</html>

we add an event listener to the button using onclick="" attribute so the function buttonClick(); will be called and activate the first select option therefor you can make this for whatever option you need.

score 0 · Answer 3 · answered Oct 11 '19 at 15:38

If this solves your problem I will explain this.

function myfunction(value) {
            console.log(value);
            switch (value) {

                case "hotel": alert("hotel");
                    //  $('#mybutton').addClass("d-none");    //you can add this if you are using bootstrap
                    $('#mybutton').attr('hidden', true);
                    break;
                case "villa":
                    alert("villa");
                    // $('#mybutton').removeClass("d-none");   //you can add this if you are using bootstrap
                    $('#mybutton').removeAttr('hidden');

                    break;
                case "test": alert("test");
                    //  $('#mybutton').addClass("d-none");    //you can add this if you are using bootstrap
                    $('#mybutton').attr('hidden', true);
                    break;

                default: alert("nulll");
                    //  $('#mybutton').addClass("d-none");    //you can add this if you are using bootstrap
                    $('#mybutton').attr('hidden', true);
            }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form">
        <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>

            <select class="form-control" id="exampleFormControlSelect1" onchange="myfunction(this.value)">
                <option value="hotel">hotel</option>
                <option value="villa">villa</option>
                <option value="test">test</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
    </div>

    <button id="mybutton" class="btn btn-primary" hidden>Click the Villa option</button>

Is there a onClick function which can be assigned to a button - resulting in an option being selected in dropdown menu elsewhere?

3 Answers3