how to recognize select2 dropdown and select2 multiselect seperatly

Question

i have two controls one select2 dropdown and another jquery multi value select

select2 dropdown

<select id="drp_me" class="select2-offscreen">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

jquery multi value select

<select id="mult_val" class="span6 select2">
  <option value="1">ONE</option>
  <option value="2">TWO</option>
  <option value="3">THREE</option>
</select>

but the problem is when i am passing these Ids to JS function and trying to display it's type both are showing the type as select-one

JS

$('#drp_me').select2();
$('#mult_val').multiSelect();
function displayType(id) // id = mult_val or drp_me
{
  var control=document.getElementById(id);
  console.log(control.type); // both controls showing as `select-one`
}

i am using jquery plugins for both controls select2 and multiSelect. basically both are same select control (select). but physically they are different. how i can differ these controls through code??

Answer 1

Have you tried adding multiple='multiple' to mult_val? Because from your markup they are both single-select.

Answer 2

You should use <select multiple> for multiselect box:

<select multiple id="mult_val" class="span6 select2">
  <option value="1">ONE</option>
  <option value="2">TWO</option>
  <option value="3">THREE</option>
</select>

You can identify the control by its IDs using "#", so for select2 you can use $('#drp_me')... and for multiselect you simply use its ID as above $('#mult_val')...