CODEWITHSUNDEEP
javascriptjqueryhtmlcssclick
Dundar
Dundar

Reputation: 1249

Simulating user clicks using JavaScript or JQuery

Yesterday, I asked a question in stackexchange and Sean and A. Wolff have already gave satisfying answer to what I was asking. The link is here The issue was that there is an overlay on top of the dropdown menu which makes it not visible if there is change on it. We removed that overlay and it worked.

I continued working on my project today and I realized that the question that I asked and therefore the answers are not exactly what I want. What I want is that, I really want to have the exact user clicks. This means that, we should not remove any class or element from the page while we are achieving our goal.

Here is a minimalist code. There is a dropdown menu and if you select the "Bedrag" in the menu, there is a text box opens next to the dropdown. Could anyone help me how I can select the "Bedrag" using JQuery or JS? Please note that, no elements or classes or whatever should be removed. It should just select the item in the dropdown and trigger the signal. I have been trying a lot with this but it boiled down to the point that I can't do it without any help from you guys.

Here is the code: http://jsfiddle.net/so0h96ns/1/

The code for the dropdown is:

<div data-custom-select class="select-price ">
  <label for="price" data-label-hide class="has-hidden-label">Selecteer prijs</label>
  <select name="adv.bedragplaats" id="price" class="price-field" data-price data-set-as-required >
    <option value="">Kies...</option>
    <option value="&lt;amount&gt;" >Bedrag</option>
    <option value="gratis" >Gratis</option>
    <option value="ruilen" >Ruilen</option>
    <option value="teab" >Prijs overeen te komen</option>
    <option value="nvt" >Niet van toepassing</option>
  </select>
</div>

Upvotes: 1

Views: 54

Answers (1)

Subtubes
Subtubes

Reputation: 16873

It's three parts

        //first assign the change event which opens the box on the side
        $('.price-field').on("change", function () {

            if ($(this).val() === "<amount>") {
                console.log("the amount option has been selected now open THE BOX");
            }

        })

            //then select the bedrang
                .find('option[value="<amount>"]')

            //then trigger the change event to open the box
                .attr("selected", true).trigger("change");

Here is the fiddle http://jsfiddle.net/orchid1/vtrsgLnr/1/

Upvotes: 1

Related Questions