Select a drop-down value using javascript (Bookly WP Plugin)

Question

I'm trying to select a drop-down value using js. In my case, I need to select "DRAW PORTRAIT" drop-down option after the plugin loads.

I tried two methods but I'm not getting anywhere. This is a part of the frontend found in Bookly WordPress plugin . I added an id id="category" to the dropdown so that I can select a value.

HTML:

<div class="bookly-js-chain-item bookly-table bookly-box" style="display: table;">
           <div class="bookly-form-group">
                <label>Service Type</label>
                <div>
                <select id="categorydraw" class="bookly-select-mobile bookly-js-select-category">
                        <option value="">Select category</option>
                    <option value="6">DRAW PORTRAIT</option>
                    <option value="7">DRAW DUMMY FIGURE</option>
                    <option value="8">DESIGN WAX SCULPTURE</option></select>
                </div>
            </div>
 </div>

Method 01

document.getElementById("categorydraw").value = "DRAW PORTRAIT";

Method 02

var objSelect = document.getElementById("categorydraw");

setSelectedValue(objSelect, "DRAW PORTRAIT");

function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}

Please see the full code where the js doesn't work: https://jsfiddle.net/3z5hcv62/

I would really appreciate if someone can correct my cranky code. Thanks in advance!

Answer 1

First, i want to make sure. Do you want to select the value of the dropdown or set the value to the dropdown?. Maybe this will help your problem.

HTML

<!-- I set the "categories" id to the dropdown -->
<select class="bookly-select-mobile bookly-js-select-category" id="categories">
    <option value="">Select category</option>
    <option value="1">Cosmetic Dentistry</option>
    <option value="2">Invisalign</option>
    <option value="3">Orthodontics</option>
    <option value="4">Dentures</option>
</select>

<p>
  Selected value: <strong id="selected"></strong>
</p>

JavaScript

var dropdown = document.getElementById('categories');
var datas = [];
var select = 3;

/* Get value with text from dropdown */
for(var i=0;i<dropdown.options.length;i++) {
    datas.push({
        id: dropdown.options[i].value,
    text: dropdown.options[i].text,
    });
}

/* For set the value */
dropdown.value = select; // after page loaded,, default value will selected is "Orthodontics"

/* For select current value with the text */
var dataSelected = datas[select];
document.getElementById('selected').innerHTML = "ID: "+dataSelected.id+", TEXT: "+dataSelected.text;

The result will show like this https://jsfiddle.net/65jnzLko/1/

You can improve that code. Like selecting datas by id of the dropdown value.

Or if you just want to set the value for your dropdown, you can do this

// using pure js
document.getElementById('yourdropdown').value = 3 // or other values

// using jquery
$("#yourdropdown").val(5) // 5 can replace with other values

Answer 2

One line of jQuery will allow you to select the item necessary:

$('#categorydraw option[value="7"').prop("selected", true);

https://jsfiddle.net/fLc1p5mq/

Edit: In order to activate on a WordPress page load, use:

jQuery( document ).ready(function() {
  jQuery('#categorydraw option[value="7"').prop("selected", true);
});