-1

how can i simulate a click on div with jquery or javascript ?

i dropdown the list with : document.querySelectorAll('.select-selected')[1].click();

but then how can i select a div ?

<div class="select-selected">Faites votre choix...</div>
<div class="select-items select-hide">
  <div>Faites votre choix...</div>
  <div>Blumotion</div>
  <div>Tip-On + BluMotion</div>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
ibibi
  • 13
  • 5
  • 1
    [Please do not upload images of code/data/errors when asking a question.](//meta.stackoverflow.com/q/285551) – CBroe Aug 08 '22 at 10:23
  • Which div are you trying to select? – evolutionxbox Aug 08 '22 at 10:24
  • Your screenshot shows that there still appears to be an original `select` element, that just got hidden. Maybe setting the value for that, will update the "enhanced" display as well. Really depends on what library / code is used for this feature. – CBroe Aug 08 '22 at 10:24
  • i tried to select element but it shotdown the list – ibibi Aug 08 '22 at 10:26
  • i need to select the second div "Tip-On + BluMotion" – ibibi Aug 08 '22 at 10:27
  • 1
    Does https://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext help? – evolutionxbox Aug 08 '22 at 10:28
  • you could use the query selector: `.select-items :last-child` – Pete Aug 08 '22 at 10:29
  • i tried this : "var element = $( "div:contains('Blumotion')" );" not working maybe i do wrong for the child i did this "$('div.select-items div:first').trigger('click');" didn't worked too – ibibi Aug 08 '22 at 10:32

1 Answers1

1

Use the CSS selector: .select-items > div:nth-child(3) to select the 3rd child within the .select-items div.

const tipOnElement = document.querySelector('.select-items > div:nth-child(3)');

tipOnElement.addEventListener('click', event => {
  console.log(event.target.textContent);
});

tipOnElement.click();
<div class="select-selected">Faites votre choix...</div>
<div class="select-items select-hide">
  <div>Faites votre choix...</div>
  <div>Blumotion</div>
  <div>Tip-On + BluMotion</div>
</div>
Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
  • i don't know why it reload the webpage – ibibi Aug 08 '22 at 10:36
  • Is the HTML you have inside of a `
    ` element?
     – Emiel Zuurbier Aug 08 '22 at 10:38
  • yes "
    " then it go tbody > tr >td > div
     – ibibi Aug 08 '22 at 10:40
  • it worked ))) if i want to go to other dropdown list do i add (1) on "document.querySelector('.select-items(1) > div:nth-child(3)');" ? – ibibi Aug 08 '22 at 10:53
  • And is the element you're trying to click by any chance a ` – Emiel Zuurbier Aug 08 '22 at 11:06
  • It would be something like `.select-items:nth-of-type(2) > div:nth-child(3)`. But it depends on the structure of your HTML. – Emiel Zuurbier Aug 08 '22 at 11:09
  • Emiel thank you so much for you help ! I used like this " document.querySelectorAll('.select-items > div:nth-child(3)')[6].click();" it work on first select element but on next one "TypeError: undefined is not an object " It worked fine in chrome but not in safari – ibobo Aug 09 '22 at 07:34