How to make value selected onClick a element

Question

When I click on Class (.device_phone_apple_x) Value 1 needs to get selected in this dropdown.

<select class="bookly-select-mobile bookly-js-select-category">
  <option value="">Select brand</option>
  <option value="1">Apple</option>
  <option value="2">Samsung</option>
  <option value="0">No category</option>
</select>

Also value 1 needs to be active in this dropdown.

<select class="bookly-select-mobile bookly-js-select-service">
  <option value="">Select model</option>
  <option value="1">iPhone X</option>
  <option value="2">iPhone 8</option>
  <option value="3">iPhone 8+</option>
</select>

Any help how I can make the JS code? Cuz nothing seems to work!?

I have this now.

$(function() { 
 $('.device_phone_apple_x').click(function(){ 
   $('.bookly-select-mobile bookly-js-select-category').val(1); 
   $('.bookly-select-mobile bookly-js-select-service').val(1); 

<script type="text/javascript">

// This is where the row with models show up
$(".device_phone").click(function(){
document.getElementById('device_choice').style.display='none';
document.getElementById('device_phone_brand').style.display='block';
});

// This is the stage where the row with the form does pop up
$(".device_phone_brand_apple").click(function(){
document.getElementById('device_phone_brand').style.display='none';
document.getElementById('device_phone_models_apple').style.display='block';
});

// Reload page
$("#annuleren_button").click(function(){window.location.reload();});

I don't have time to test this out right now but I think this javascript is what you are looking for.........options[0].selected = true; — calmchess, May 08 '18 at 19:25
but there's no element with class `.device_phone_apple_x` ... where is it? Also, add the comment above in your main question, not as comment — Calvin Nunes, May 08 '18 at 19:26
The Class that needs to be clicked is elswhere on the website — Je Boy Abi, May 08 '18 at 19:31
So, please, show it for us... we can't help without seeing the code, is impossible — Calvin Nunes, May 08 '18 at 19:31
I am so sorry I am new here. Just to be clear. I have a slider on my website where phones are showing. Beneath that slider there is a form with 2 dropdowns. This class (device_phone_apple_x) is for the iPhone X. When clicked I want the 2 dropdowns selected automatically. Let me know what u need to see! — Je Boy Abi, May 08 '18 at 19:34
we need to see exactly what you described above. (HTML and JS, no need for CSS, to reduce code). — Calvin Nunes, May 08 '18 at 19:38
I don't know how. I am on Wordpress and using the form via a plugin — Je Boy Abi, May 08 '18 at 19:50

score 1 · Accepted Answer · answered May 08 '18 at 19:41

The problem is with your jQuery selector. Try modifying to this:

$(function() { 
  $('.device_phone_apple_x').click(function(){ 
    $('.bookly-select-mobile.bookly-js-select-category').val(1); 
    $('.bookly-select-mobile.bookly-js-select-service').val(1);

https://stackoverflow.com/a/1041352/550309

score 0 · Answer 2 · answered May 08 '18 at 19:51

Do you mean something like this?

<button class="device_phone_apple_x">Apple X</button>

<select class="bookly-select-mobile bookly-js-select-category">
    <option value="">Select brand</option>
    <option value="1">Apple</option>
    <option value="2">Samsung</option>
    <option value="0">No category</option>
</select>

<select class="bookly-select-mobile bookly-js-select-service">
    <option value="">Select model</option>
    <option value="1">iPhone X</option>
    <option value="2">iPhone 8</option>
    <option value="3">iPhone 8+</option>
</select>

<script>
  const button = document.querySelector('.device_phone_apple_x')
  const selectCategory = document.querySelector('.bookly-js-select-category')
  const selectService = document.querySelector('.bookly-js-select-service')

  button.addEventListener('click', () => {
    const value = 1
    selectCategory.value = value
    selectService.value = value
  })
</script>

No there is no button. Just a image with class (device_phone_apple_x) that as been made clickable with JS — Je Boy Abi, May 08 '18 at 19:55

score 0 · Answer 3 · answered May 08 '18 at 20:03

It worken guys! Thanks!

<script type="text/javascript">

jQuery(document).ready(function($) {

$(".device_phone_apple_x").click(function(){
    document.getElementById('device_phone_models_apple').style.display='none';
    document.getElementById('progress').style.display='none';
    document.getElementById('bookly_row1').style.display='block';
    $('.bookly-select-mobile.bookly-js-select-category').val(1); 
    $('.bookly-select-mobile.bookly-js-select-service').val(1);
    $('.bookly-next-step.bookly-js-next-step.bookly-btn.ladda-button').trigger('click');
});

});

How to make value selected onClick a element

3 Answers3