How to check if selectbox is grabbed and get it's ID with Jquery-CodePudding

I am trying to see if any selectbox is grabbed, with jquery, then get it's id from that, I have multiple boxes with the same name but a different id after, these are spawned via php. Ex. number1 eg. number integer.

I would like to check/register an event where on click of any selectbox the id gets grabbed and put into a variable for later manipulation.

kind of like

if ($('select').clicked) {
    var sID = $('select').getID();
    // use id to see which selectbox has been clicked.
}

The above needs to happen dynamically eg. we don't know the selectbox, so we need an event to check if ANY select has been clicked, then grab it's ID.

I have around 20 selectboxes, and don't want to make an individual check for them, as that takes up too much space, and more select boxes could come in the future.

P.S. is this even possible?

CodePudding user response：

It's actually quite easy with jQuery. Use the on() method to attach a click handler on each select and grab the current clicked using $(this).

$(document).ready(function(){
  $('select').on('click',function(){
    console.log($(this).attr('id'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select id="s1">
  <option>1</option>
</select>
<select id="s2">
  <option>1</option>
</select>
<select id="s3">
  <option>1</option>
</select>

CodePudding user response：

The variable is overwritten on each "input" event, so it is basically an alert of which one was the last <select> the user used. It will not trigger on being just clicked, the user must select a value and if the same value is selected as it was previously, then it will not trigger as well.

Details are commented in example below

// Utility function for demo
const log = data => console.log(JSON.stringify(data));

// Reference the form
const form = document.forms[0];

// Register input event to form
form.oninput = xIds;

/* 
If you just want the last select user has used just declare a variable
*/
let x;

// Event handler
function xIds(e) {
  /*
  The select user is picking a value from
  */
  const active = e.target;

  /*
  If the select has the name 'x'...
  ...assign active id to variable x.
  */
  if (active.name === 'x') {
    x = active.id;
    log(x);
  }
}

.as-console-row::after {
  width: 0;
  font-size: 0;
}

.as-console-row-code {
  width: 100%;
  word-break: break-word;
}

.as-console-wrapper {
  min-height: 100%;
  max-width: 50%;
  margin-left: 50%;
}

<form>
  <select id='x1' name='x'>
    <option selected disabled>Select an option</option>
    <option>0</option>
    <option>1</option>
  </select><br>
  <select id='x2' name='x'>
    <option selected disabled>Select an option</option>
    <option>0</option>
    <option>1</option>
  </select><br>
  <select id='x3' name='x'>
    <option selected disabled>Select an option</option>
    <option>0</option>
    <option>1</option>
  </select><br>
  <select id='x4' name='x'>
    <option selected disabled>Select an option</option>
    <option>0</option>
    <option>1</option>
  </select><br>
  <select id='x5' name='x'>
    <option selected disabled>Select an option</option>
    <option>0</option>
    <option>1</option>
  </select>
</form>

CodePudding user response：

You can do it in jQuery. first you need to add a listener on change event for all select box

for eg :

$('select').change(function(){
var sID = $(this).attr('id'); })

or you can also use 
    $('select').on('click',function(){
    var sID = $(this).attr('id'); })
})