Disable accordion open when clicked on select tag

I have select tag in title of accordion like below

<div class="panel">
    <div class="panel-heading" id="scripset3mainheading0" role="tab">
        <a class="panel-title finalscripsetting" data-id="NF" data-parent="#scripsetp3accordion" data-toggle="collapse" href="#scripset3mainpart0" aria-controls="scripset3mainpart0" aria-expanded="true">
            <select class="subseltitle">
                <option selected="">1</option>
                <option>2</option>
                <option>3</option>
            </select>Title</a>
    </div>
    <div class="max100 panel-collapse collapse show" id="scripset3mainpart0" aria-labelledby="scripset3mainheading0" role="tabpanel" style="">content</div>
</div>

When I click select tag , I dont want the accordion to open , I tried stopPropagation but selectbox is opening and closing immediately

$(document).on('click','.subseltitle',function(e){
                    e.stopPropagation();
                     if (!$(e.target).is("select")) {
                    e.preventDefault();
                }

});

Answer

You can achieve that by setting pointer-events to none with css.

let controller = document.querySelector('#controller');
controller.addEventListener('click', (e) => {
  document.querySelector('.subseltitle')
  .classList.toggle('disabled-select', controller.checked);    
});

.disabled-select {
  pointer-events: none;
}

<a>
  <select class="subseltitle">
    <option selected="">1</option>
    <option>2</option>
    <option>3</option>
  </select>
  Title
</a>
<br/>
<input id="controller" type="checkbox"/>
<label for="controller">Disable Default behaviour</label>

If you want to catch onclick events add a parent container with display:contents and use it to instead of using the select tag directly.