Dropdown menu default value

JavaScript
1

Hi, with a userscript from this page (saved from the original), in dropdown menu “Formato”, I’m trying to set “Xls (Excel)” as default value.

This is the related HTML code:

<select name="formatoOut" style="min-width: 0px; display: none;">
      		<option value="DOC">
        			Doc (Word)</option>
      		<option value="ODT">
        			Odt (OpenOffice Writer)</option>
      		<option value="PDF">
        			Pdf (Acrobat Reader)</option>
      		<option value="XLS">
        			Xls (Excel)</option>
      		</select>

For a similar page this userscript worked for me, but not here:

document.querySelector("select[name='formatoOut']").value="XLS";
document.querySelector("div[class='chosen-container chosen-container-single chosen-container-single-nosearch'] a[class='chosen-single'] span").innerHTML = "Xls (Excel)"

I think the combobox is created through the “Chosen” jQuery plugin (official page).

Thanks very much!

2

Think you’d have to move the “selected” attribute to the correct option, and then call the “Tell Chosen the select box has changed” function as specified in their documentation…

  // tell Chosen that a select has changed
  $('.my_select_box').trigger('chosen:updated');
3

Maybe I am completly blind but I see now option with value “XLS”

1 Like
4

Thank you, finally this userscript worked with jQuerym is there a way to use pure javascript instead? Thanks again!

5

Sorry, I corrected the snippet

6

You… should be able to, by using querySelector and dispatchEvent (along with an Event object)

Creating and triggering events - Event reference | MDN (mozilla.org)

1 Like
7

If you have only one element with his name you can use

let elements = document.getElementsByName("formatoOut");
element[0].value = 'XLS';
2 Likes
8

Thanks, I tried this, but does not work:

(function() {
    'use strict';
    function setDefaultValue() {
        var selectElement = document.querySelector('select[name="formatoOut"]');
        if (selectElement) {
            var options = selectElement.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].value === "XLS") {
                    options[i].selected = true;
                    break;
                }
            }
            // Trigger the "change" event to update the Chosen combobox
            var event = new Event('change', { bubbles: true });
            selectElement.dispatchEvent(event);
        }
    }

    // Wait for the page to load
    window.addEventListener('load', function() {
        // Call the function to set the default value
        setDefaultValue();
    });
})();
9

That’s not the same event, is it?

10

This also doesn’t work

(function() {
    'use strict';

    // Wait for the document to be fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        // Function to check if Chosen is loaded
        function isChosenLoaded() {
            return typeof HTMLElement.prototype.chosen !== 'undefined';
        }

        // Function to set the default value
        function setDefaultValue() {
            var selectElement = document.querySelector('select[name="formatoOut"]');
            if (selectElement) {
                selectElement.value = 'XLS';
                if (isChosenLoaded() && typeof Event === 'function') {
                    var event = new Event('chosen:updated', { bubbles: true, cancelable: true });
                    selectElement.dispatchEvent(event);
                }
            }
        }

       // Call the function to set the default value
        setDefaultValue();
    });
})();
11

Where did this come from? In your working post, this was if (typeof jQuery !== 'undefined' && typeof jQuery.fn.chosen !== 'undefined') {

Does isChosenLoaded return true or false?

14

Finally it works without typeof, thanks very much m_hutley, link here.

1 Like
15

Thanks, Thallius, I found the solution.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.