Set default option value of combobox in popup

[lawrencedaniello]

Hi, with a userscript on this uploaded webpage (saved from the originale) I would like to set
“O2 - SCARTO ORDINARIO 2024” as default option value of the combobox of the popup. This is the html of the combobox:

<select class="grid-12" id="comboWorklist" name="idWorklist" style="display: none;">
  <option value="211">O2 - LIBRI SMARRITI</option>
  <option value="230">O2 - NON RESTITUITI</option>
  <option value="231">O2 - SCARTO ORDINARIO 2024</option>
</select>

<div 
  class="chosen-container chosen-container-single grid-12 chosen-container-single-nosearch" 
  style="width: 250.667px;"   
  title="" 
  id="comboWorklist_chosen"
>
  <a class="chosen-single" tabindex="-1">
    <span>O2 - LIBRI SMARRITI</span>
    <div><b></b></div>
  </a>
  <div class="chosen-drop">
    <div class="chosen-search"><input type="text" autocomplete="off" readonly=""></div>
    <ul class="chosen-results">
      <li class="active-result result-selected" data-option-array-index="0" style="">O2 - LIBRI SMARRITI</li>
      <li class="active-result" data-option-array-index="1" style="">O2 - NON RESTITUITI</li>
      <li class="active-result" data-option-array-index="2" style="">O2 - SCARTO ORDINARIO 2024</li>
    </ul>
  </div>
</div>

The popup opens after clicking on the button “Aggiungi a lista”, that has this HTML:

<ol data-parent="15030030000000">
    <li data-id="15030030100000">
    <a title="Aggiungi a lista" data-fn="D_INV_AGGWLIST_DET" href="/sebina/catalogazione/D_INV_AGGWLIST_DET.do?codMenu=15030030100000&amp;codFnz=D_INV_AGGWLIST_DET">
                  <span class="tooltip"> Aggiungi a lista</span>   
                </a>
              
      </li>
  </ol>

This is what I tried without succes, thank you!

// Set the default value
document.getElementById('comboWorklist').value = '231'; // Assuming '231' is the value for "O2 - SCARTO ORDINARIO 2024"

// Trigger the chosen:updated event
var comboWorklist = document.getElementById('comboWorklist');
var event = new Event('chosen:updated');

// Dispatch the event
comboWorklist.dispatchEvent(event);

[Thallius]

Just set selected in the option

<option value="" selected>text</option>

[lawrencedaniello]

Thanks, @Thallius, I’m using a userscript with an extension, not directly modifying the HTML of the original page.

[Thallius]

@lawrencedaniello

document.getElementById('comboWorklist').value = '231'; // Assuming '231' is the value for "O2 - SCARTO ORDINARIO 2024"

This will normally work. The only possibility that it does not work is, that your code is executed before the html Dom is fully loaded.

[rpg_digital]

This ?

window.addEventListener('load', () => {
  const selected = document.querySelector('#comboWorklist option[value="231"]');
  selected.setAttribute('selected', true);
})

[lawrencedaniello]

Thanks, @rpg_digital & @Thallius but it doesn’t work, the problem is the Chosen Library. This jQuery script works instead, but I want a pure JavaScript solution without using jQuery and without relying on @run-at.

[rpg_digital]

@lawrencedaniello

but I want a pure JavaScript solution without using jQuery and without relying on @run-at.

I did already comment on this in a previous thread. chosen is dependent on JQuery or alternatively the Prototype framework.

GitHub - harvesthq/chosen: Deprecated - Chosen is a library for making long,...

To get chosen to work with Vanilla JS would involve editing the chosen script — not a good idea.

edit: I also seem to remember from similar issues you had some time ago, that a possible workaround was to simulate clicking on that option. I maybe wrong.

Just a quick search back

[TamperMonkey] Select field value

The script I wrote for you was targeting the criteria fields. For what you are asking now, you would need a more general selector. const selectOption = function (selector, value) { const selectOpts = document.querySelector(selector) // if a valid select element if (selectOpts && selectOpts.matches('select')) { selectOpts.value = value selectOpts.dispatchEvent(new Event('change')) } } // explicit selections selectOption('.riga-contesto select[name="contesto"]'…

In that example I dispatch the change event as well.

[rpg_digital]

Kind of working blind here, but this maybe?

window.addEventListener('load', () => {
  const select = document.querySelector('#comboWorklist');
  select.value = 231;
  select.dispatchEvent(new Event('change'));
})

[lawrencedaniello]

Thanks, @rpg_digital, it doesn’t work, I’ll I’ll do some more tests…

[rpg_digital]

I’m not surprised.

I am looking at your uploaded html stato2.html, and on inspection the select form does not look like the code you have posted. I’m guessing chosen does a bit of a re-work to it?

<select class="grid-12" id="comboWorklist" name="idWorklist" style="display:none">
</select>
<div class="chosen-container chosen-container-single grid-12 chosen-container-single-nosearch" style="width:250.667px" title="" id="comboWorklist_chosen"><a class="chosen-single" tabindex="-1"><span>O2 - LIBRI SMARRITI</span>
    <div><b></b></div>
  </a>
  <div class="chosen-drop">
    <div class="chosen-search"><input type="text" autocomplete="off" readonly="" value=""></div>
    <ul class="chosen-results"></ul> <!-- no results !! -->
  </div>
</div>
</label>

edit: scanning through the stato2 HTML, I am not even sure if it is loading the necessary scripts.

[lawrencedaniello]

Probably by saving the html file you lose some information. The code I posted corresponds to the original file

[rpg_digital]

Yes I think we are missing some dependencies etc.

[kicken]

Triggering the chosen:updated event after changing the original select should work. You can test this on the demo page for chosen. Running these lines in the console will successfully change the value of the country select:

document.querySelector('.chosen-select').options[2].selected=true;
document.querySelector('.chosen-select').dispatchEvent(new Event('chosen:updated'));

Your code that sets the value and triggers the updated event should work. If it’s not, then what you probably have is a timing problem as mentioned. For example, is your extension waiting for the popup to open before running the code? If not, you might be running it too soon.

[lawrencedaniello]

Thanks @kicken & @rpg_digital, this javascript finally works!