A. Lau A. Lau - 1 month ago 7
CSS Question

select box click function no longer detected bootstrap

So I am using bootstrap select, however, when I add in the

class="selectpicker"
any non-multiple select boxes loses their ability to detect the click functionality.

I have the function:

$("select").click(function()
{
if (this.id.match(/rest/g))
{
return;
}
name = this.id;
console.log(name);

select_id = name.replace("_free", "");
radio = select_id + '_radio';
//$('input:radio[name='+radio+']:checked').prop('checked', false).checkboxradio("refresh");
document.getElementById(select_id + "_radio3").checked = true;
}


What this does is determine which select was clicked on, which then changes the checked radio button. However, after adding in selectpicker, only the ones with
multiple
still change the radio button.

Any idea how to get around this?

https://jsfiddle.net/34ksL2h5/3/

(remove the
class="selectpicker"
and you'll see the issue)

Answer
<div>
  <input id="select1_radio" type="radio" name="radio1">
  <select id="select1" class="selectpicker">
    <option>some option 1</option>
    <option>some option 2</option>
    <option>some option 3</option>
  </select>
</div>
<div>
  <input id="select2_radio" type="radio" name="radio1">
  <select id="select2" class="selectpicker">
    <option>some option 1</option>
    <option>some option 2</option>
    <option>some option 3</option>
  </select>
</div>

script. Sorry it's native JS because I don't know how to use jQuery. Hope someone translate it for you.

var sel = document.querySelectorAll('.bootstrap-select');

[].forEach.call(sel, function(elem){
    elem.onclick = function(){
    this.previousElementSibling.checked = true;
  }
});

// $(".selectpicker").selectpicker();

Working fiddle: https://jsfiddle.net/34ksL2h5/10/

The trigger was the .bootstrap-select. Hope it helps!