Select dropdown javascript

Question

On one website from where I'm doing scraping there is a new dropdown like the one below:

<select class="genericInput regular-16-important ng-pristine ng-valid ng-not-empty ng-touched" data-ng-change="changeOrdinamento(ordinamento)" name="singleSelect" id="singleSelect" data-ng-model="ordinamento" style="border-left: white">
                <!-- //m.n.q evoluzione ricerche blocco 1 inizio -->
                    <!-- ngIf: tipoRicercaIniziale ==1 || tipoRicercaIniziale ==2 --><option ng-if="tipoRicercaIniziale ==1 || tipoRicercaIniziale ==2" value="rilevanza" class="ng-scope">RILEVANZA</option><!-- end ngIf: tipoRicercaIniziale ==1 || tipoRicercaIniziale ==2 -->
                    <!-- //m.n.q evoluzione ricerche blocco 1 fine -->                      
                    <option value="fornitore">FORNITORE</option>
                    <option value="nomeCommerciale">NOME</option>
                    <option value="price">PREZZO</option>
               </select>

The default value is "rilevanza" but I want to automatically switch it to "price".

If I'm clicking with the mouse on the dropdown and then on price, the content of the page it's reloading for be filtered for price (from cheaper to higher price).

If I'm typing in the console:

document.getElementById("singleSelect").selectedIndex = 3;

The value of the dropdown is correctly updating but the page content is not reloading.

There is probably something missing? Some validation to do? PS: I'm not a Javascript dev, I'm iOS Dev.

That's why it's not reloading the content... Do you have any suggestions on how I can achieve the triggering of the event? — Pietro Messineo, Nov 12 '19 at 16:26
https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually — epascarello, Nov 12 '19 at 16:26
you can try to trigger the event manually, by `document.getElementById("singleSelect").onchange()` — Calvin Nunes, Nov 12 '19 at 16:26
@CalvinNunes if I'm calling document.getElementById("singleSelect").onchange() it's saying that's not a function — Pietro Messineo, Nov 12 '19 at 16:28
Please, refer to the link that @epascarello posted in comment above, it says it all — Calvin Nunes, Nov 12 '19 at 16:29
Possible duplicate of [How can I trigger an onchange event manually?](https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually) — pppery, Nov 13 '19 at 03:38

score 0 · Answer 1 · answered Nov 12 '19 at 17:17

Ciao, put the 'onchange' in the -select ... onchange="myfunction(this.value)"- and add the script code for reloading the page as you want in a script section

<select class="genericInput regular-16-important ng-pristine ng-valid ng-not-empty ng-touched" data-ng-change="changeOrdinamento(ordinamento)" name="singleSelect" id="singleSelect" data-ng-model="ordinamento" style="border-left: white" onchange="myfunction(this.value)">
<!-- //m.n.q evoluzione ricerche blocco 1 inizio -->
<!-- ngIf: tipoRicercaIniziale ==1 || tipoRicercaIniziale ==2 -->
<option ng-if="tipoRicercaIniziale ==1 || tipoRicercaIniziale ==2" value="rilevanza" class="ng-scope">RILEVANZA</option>
<!-- end ngIf: tipoRicercaIniziale ==1 || tipoRicercaIniziale ==2 -->
<!-- //m.n.q evoluzione ricerche blocco 1 fine -->
<option value="fornitore">FORNITORE</option>
<option value="nomeCommerciale">NOME</option>
<option value="price">PREZZO</option>

and in the script section

<script type="text/javascript">

// javascript
function myfunction(value) {
    alert(value);
    switch (){ ... }
}

// using jquery: don't put 'onchange="myfunction(this.value)"' in the dropdown class
$('#singleSelect').onchange(function () {
    // do something
});

it's cleaner and you can do whatever you want. If it's a Single Page App simply reload/change/update the part you want to reorder.

There is only one problem... I'm not the owner of the website, so I cannot add the onchange="myfunction(this.value) — Pietro Messineo, Nov 12 '19 at 17:18

Select dropdown javascript

1 Answers1