Question 37157 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Simulate human click or Keypress event to select from dropdown menu – Jquery

I’m trying to select an option from a category dropdown through a chrome extension with javascript and jquery. When I normally select an option from the first dropdown menu, the values ??in the second dropdown menu change based on my selection.

I tried to select an option with many different methods, here are most of them:

in jquery
$("#categorisation_1").val($("#categorisation_1 option").eq(4).val());
$('#categorisation_1').val('5: Object').change();
$('#categorisation_1').val('5: Object').dblclick();
$('#categorisation_1>option:eq(5)').prop('selected', true);
$("#categorisation_1").val('5: Object').trigger('change');
$('#categorisation_1').val('2: Object');
$('#categorisation_1>option:eq(5)').attr('selected', 'selected').trigger('change');
$('#categorisation_1').find('option:eq(3)').attr('selected', true);
in javascript
document.getElementById('categorisation_1').options[3].selected=true;
document.getElementById('categorisation_1').value = '9: Object';
document.getElementById("categorisation_1").selectedIndex = 1;
document.getElementById('categorisation_1').getElementsByTagName('option')[10].selected = 'selected';
document.getElementById('categorisation_1').value = '9: Object';
document.getElementById('categorisation_1').focus();
document.getElementById('categorisation_1').value = '5: Object';
document.getElementById("categorisation_1").options[2].selected = "selected";
document.getElementById('categorisation_1').getElementsByTagName('option')[5].selected = 'selected'
*******************
var select = document.getElementById("categorisation_1");
select.size = select.options.length;
******
document.getElementById('categorisation_1').setAttribute('size', 3);
********************
Array.from(document.getElementById('categorisation_1').options)
    .filter(x => x.value === "9: Object")[0]
      .setAttribute('selected', true);

Nothing worked… They change the value in the category dropdown but it doesn’t trigger the changes in the next dropdown. Is there a way to select an option as if I was human, via javascript or Simulate pressing a button on the keyboard or any other method?

here is the source code of the first drop down menu
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    here is the answer if it can help anyone else thanks @Snm

    const select1 = document.getElementById('select1');
const select2 = document.getElementById('select2');
 
select1.addEventListener('change', () => {
select2.removeAttribute('disabled');
});
 
setTimeout(() => {
select1.value = 2;
select1.dispatchEvent(new Event("change"));
}, 1E3);
    <select id="select1">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select> - 
<select id="select2" disabled="disabled">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>


  2. 0 
    $(function() 
{
    $('#items').on('change', function()
    {
        var val = $(this).val()
        if(val == '')
        {
            $('#sub_tems').html('');
        }
        else
        {
            $('#sub_tems').html(creaeOptions($(this).val()));
        }
    });
    $('#items').val('2: Object').trigger("change")
});
    
function creaeOptions(val)
{
    var data = [];
    data['1: Object'] = '<option value="1">Sub Item 1 1</option><option value="2">Sub Item 1 2</option><option value="3">Sub Item 1 3</option>';
    data['2: Object'] = '<option value="1">Sub Item 2 1</option><option value="2">Sub Item 2 2</option><option value="3">Sub Item 2 3</option>';
    data['3: Object'] = '<option value="1">Sub Item 3 1</option><option value="2">Sub Item 3 2</option><option value="3">Sub Item 3 3</option>';
    return data[val];
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="items">
    <option value="">Select</option>
    <option value="1: Object">Item 1</option>
    <option value="2: Object">Item 2</option>
    <option value="3: Object">Item 3</option>
</select>

<select id="sub_tems"></select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search